红色部分：相当于放映机，也就是容器，overflow：hidden
绿色内容：相当于胶片，也就是dom

vue

vue的核心之一，数据驱动模版，循环播放映射的数据上就是 [1,2,3,4,5,6] —》[2,3,4,5,6,1] —》 [3,4,5,6,1,2]

动画是数据调整一次就执行一次

<ul :class="{'comm__qa-transitoin':animate}"><li v-for="item in list" :key="item.title">{{item.title}}</li>
</ul>

data() {return {list: [{title: '1哈哈哈'},{title: '2哈哈哈'},{title: '3哈哈哈'},],animate: false,}
},
created() {setInterval(this.showMarquee, 3000)
},
methods: {/*** 数据驱动模版，循环播放映射*/showMarquee: function () {this.animate = true;setTimeout( () => {// //先加一个到尾巴，然后去个头this.list.push(this.list[0]);this.list.shift();this.animate = false;}, 500)},
}

ul{height: 0.64rem;overflow: hidden;
}
li{height: 0.64rem;
}
.comm__qa-transitoin {transition: all 0.5s;margin-top: -0.64rem;
}

小程序

利用小程序原声组件swiper，方向设置为纵向 ：vertical=‘true’设置同时显示的滑块数量：display-multiple-items=‘4’设置自动轮播：autoplay：‘true’

    <swiper class="comm__qa-ul" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'><swiper-item wx:for="{{list}}" wx:for-item="item" wx:for-index="idx" wx:key="idx"><view class="comm__qa-li">{{item.title}}</view></swiper-item></swiper>

.comm__qa-ul{height: 64rpx;overflow: hidden;
}
.comm__qa-li{height: 64rpx;
}

data: {list: [{title: '1哈哈哈'},{title: '2哈哈哈'},{title: '3哈哈哈'},],},