實現方式是利用小程序原聲組件swiper，方向設置為縱向 ：vertical=‘true’設置同時顯示的滑塊數量：display-multiple-items=‘4’設置自動輪播：autoplay：‘true’.

wxml

<!-- 底部排名 --> <!-- vertical滑動方向是否為縱向 --> <!-- autoplay是否自動切換 --> <!-- circular是否采用銜接滑動 --> <!-- interval自動切換時間間隔 --> <swiper class="tab-right" vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='1'><view class="right-item"><block wx:for='{{aa}}'><swiper-item><view class='content-item'><text class='name'>{{item.nickName}}</text><text class='wawa'>獲得獎金{{item.reward}}元</text></view></swiper-item></block></view> </swiper>

wxss

/* 底部滾動列表 */.tab-right {width: 90%;height: 100rpx;line-height: 50rpx; } .right-item {height: 100%;width: 100%; } .content-item {width: 95%; } .name {font-size: 26rpx;float: left;line-height: 100rpx;color: #b0aaa9;margin-left: 20rpx;width: 40%;height: 100%;overflow: hidden; } .wawa {font-size: 26rpx;float: right;line-height: 100rpx;color: #999; }

js

//index.js const app = getApp()Page({data: {aa: [{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},{nickName: "wang",reward: "2"},],},onLoad: function() {},})

總結

以上是生活随笔為你收集整理的微信小程序实现无限滚动列表的全部內容，希望文章能夠幫你解決所遇到的問題。

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