小程序、vue 新聞上下輪播

• • vue
  • 小程序

紅色部分：相當于放映機，也就是容器，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哈哈哈'},],},

總結

以上是生活随笔為你收集整理的小程序、vue 新闻上下轮播的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。