微信小程序实现无限滚动列表

本文实例为大家分享了微信小程序实现无限滚动列表的具体代码，供大家参考，具体内容如下

效果图1.0

实现方式是利用小程序原声组件斯威珀，方向设置为纵向：垂直="真"设置同时显示的滑块数量：显示-多项='4 '设置自动轮播：自动播放："真"。

话不所说，直接上代码：

！-底部排名-view class=' contentBottom ' view class=' bottom first ' text id=' 0 ' data-id=' 0 '获奖名单/text/view swiper class=' tab-right ' style=' background : { { bgColor } }；'vertical=' true ' autoplay=' true ' circular=' true ' interval=' 2000 ' display-multi-items=' 4 ' view class=' right-item ' block wx : for-index=' idx ' wx : for=' { { aa } } ' swiper-item view class=' content-item ' image src=' { { item。头像URL } } ' class=' avater '/图像文本class=' name ' { item。昵称} }/text class=' wawa获得奖金{{item。悬赏}}元/text/view/swiper-item/block/view/swiper/view/*底部滚动列表*/.内容底部{ padd : 20 rpx 0；显示： flex flex-方向：柱；正义-内容：中心；背景# f8e1da}。底部第一{宽度： 90%;显示： flex证明内容：空间环绕；border: 1px固体# 663a83盒子尺寸：边框盒子；margin: 0 auto}。底部第一个文本{宽度： 100%;文本对齐：中心；font-size : 30 rpx颜色： # 663a83线高： 60 rpx右边框： 1px实心# 663a83盒子尺寸：边框盒子；}.底部第一个文本： th-child(1){边框：无；}.制表符-右{宽度： 90%;margin: 20rpx auto高度： 405 rpx}.右项{ padd : 0 20 rpxbackground : # fbeeed高度： 100%;宽度： 100%;盒子尺寸：边框盒子；}.内容项{ height : 100 rpx border-bottom : 1 px实心# ede1d4宽度： 95%;}.avater { height: 50rpx宽度： 50 rpx边界半径： 100 rpx页边距-顶部： 25 rpx向左浮动：}.名称{ font-size : 26rpx向左浮动：线高： 100 rpxcolor: # b0aaa9左边距左： 20rpx宽度： 40%;高度：100%;飞越：隐藏；}.wawa { font-size : 26 rpx向右浮动：线高： 100 rpxcolor : # 999 } data : { aa : [{ 0昵称：'wang '，reward:'2' }，{ 0昵称： 'wang '，reward: '2' }，{ 0昵称： 'wang '，reward: '2' }，{ 0昵称： 'wang '，reward: '2' }，{ 0昵称3: '王'，报酬： '2' }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。