作者 ： 混元霹雳手-ziksang
我这里就不帖图了，marquee就是轮播广告或公告。。。。。
给vux打打广告吧，我感觉功能最强大的还是vux ui库,我带大家看看这玩意如何实现的，你别看学别人写组件，还能学到一些你平常用不到的弱知识点，双击，666666，没毛病。
在这里打个广告，如果有谁私底下有兴趣的，想和我一起打造一套基础vue的ui组件库的话，请联系我！！！！！！
接下来还是按着我们约定的来
2.代码运行vue-cli 2.1版本
3.组件代码都在components文件夹里
4.主代码逻辑都在 App.vue文件夹里
我什么都不要我只要
赞
在vux中marquee里分成了两组件,分别进行slot
1.第一个组件中slot是用来放入每个marquee节点
2.第二个组件中solt是在每个节点放入文案
这有什么好处呢？
1.第一可以让代码更清楚，在第一个组进行逻辑层编写和初始化配置
2.第二个组件进行逻辑启动
这里的无逢滚动又是如何做到的呢？
1.这里进行了上滚动和下滚动，分别进行了不同的初始化配置
2.通过cloneChild(true)进行深复制分别辨别direction的位置进行配置
在compoents>marquee>marquee.vue
我们先看看template部分
<div class="vux-marquee" :style="{height: height + 'px'}">
<ul class="vux-marquee-box" ref="box" :style="{transform: `translate3d(0,${currenTranslateY}px,0)`, transition: `transform ${noAnimate ? 0 : duration}ms`}">
<slot>slot>
ul>
div>
</template>复制代码解析：
1.首先在class='vux-marquee'dom节点中， 对height进行了样式配置，这里的hight起什么作用，之所以要配置，肯定是要有作用才配置，就是对第一条marquee公告的高度进行复制放入，来进行每条的显示
2.{transform:translate3d(0,${currenTranslateY}px,0)对每条显示的位置进行改动 3.transform ${noAnimate ? 0 : duration}ms}对初化第一条和无逢滚动接入的一个时间点我们对动画时间进行0s设置
再看看script中prop部分
props: {
interval: {
type: Number,
default: 2000
},
duration: {
type: Number,
default: 300
},
direction: {
type: String,
default: 'up'
}
},复制代码对外暴露的三个属性
1.interval:每个marquee条目间格多少换一次
2.duration:对动画时长多少设置
3.direction：对上或下marquee的配置
再看看script中data数据的
data () {
return {
currenTranslateY: 0,
height: '',
length: 0,
currentIndex: 0,
noAnimate: false
}
},复制代码1.currenTranslateY ：改变的y轴解度存放
2.height:高度存放的值存放
3.length:marquee条目的总长度存放
4.当前每个条目的index下标值存放
5.是否是进行动化的配置值存放
再看看script中methods中三大方法
init () {
this.destroy()
if (this.cloneNode) {
this.$refs.box.removeChild(this.cloneNode)
}
this.cloneNode = null
let firstItem = this.$refs.box.firstElementChild //获取box节点下的第一个元素
if (!firstItem) {
return false
} //如果没有li元素则退出
this.length = this.$refs.box.children.length //获得ul下li节点的长度
this.height = firstItem.offsetHeight
if (this.direction === 'up') {
this.cloneNode = firstItem.cloneNode(true)
this.$refs.box.appendChild(this.cloneNode)
} else {
this.cloneNode = this.$refs.box.lastElementChild.cloneNode(true)
this.$refs.box.insertBefore(this.cloneNode, firstItem)
}
},复制代码这里是初始化配置方法，我们就挑重要的说
1.this.cloneNode=null进行存放，以但于从新渲染时可以删除标记
2.firstItem这个变量是拿全marquee盒子中第一个条目dom节点
3.this.length是所有条目的总数
4.this.height是第一个条目的高度，然后滚动视图就基于第一个条目的高度进行配置
5.在最后的一个this.direction === 'up'这个判断语句中，可以看出对属性dircetion来进行初始化配置，这里同时也是对无逢滚动的操作进行配置，如果是向上滚动，就深度复制第一条目进行最后节点插入，如果是down,就对最后一个条目深度复制插入到第一个条目前
go (toFirst) {
this.noAnimate = true
if (toFirst) {
this.currentIndex = 0
this.currenTranslateY = 0
} else {
this.currentIndex = this.length - 1 //当我们向下marquee的时候，此时最后一个下标为总长度-1
this.currenTranslateY = -(this.currentIndex + 1) * this.height
//因为如果向下的话，我们在li的最项部插入了最后一dom此时我们要+1
}
}复制代码这个go方法就是中间转换层
1.在无逢滚动时候对动画时间设为false则为0，
2.如果tofirst参数为ture时则是向上滚动配置
3.如果tofirst参数为false时则是下面滚洞配置
再看看start方法
start () {
if (this.direction === 'down') this.go(false) //对初始样式方向
this.timer = setInterval(() => {
if (this.direction === 'up') {
this.currentIndex += 1
this.currenTranslateY = -this.currentIndex * this.height
} else {
this.currentIndex -= 1
this.currenTranslateY = -(this.currentIndex + 1) * this.height
}
if (this.currentIndex === this.length) {
setTimeout(() => {
this.go(true)
}, this.duration)
} else if (this.currentIndex === -1) {
setTimeout(() => {
this.go(false)
}, this.duration)
} else {
this.noAnimate = false
}
}, this.interval + this.duration)
},复制代码start方法则是启动方法if (this.direction === 'down') this.go(false) //对初始样式方向的第一个条目进行配置，如果是down,则是从最后一条开始，如果是up则是从第一条开始
2.开始定时器开始进行条止滚动如果没有滚动到深度复制的dom的时候则一直开始动画时长，如果下标配置到深度复制的dom条目时则传入false进行go方法过度加入无逢滚动协条！改变translate3d的y方法
marquee.vue完整代码
复制代码marquee-item配置
在components>marquee>marquee-item.vue
复制代码当每个条目加載dom完毕则开始调用，如果是从新渲染，或者切换出去缓存的组件则进行时间关毕，再进行Init()初始化，再start()开始滚动
App.vue
复制代码然后你就可以启动了，看看效果如何
渣渣前端开发工程师，喜欢钻研，热爱分享和讲解教学， 微信 zzx1994428 QQ494755899
支持我继续创作和感到有收获的话，请向我打赏点吧
如果转载请标注出自@混元霹雳手ziksang