抖音头条微信小程序_微信小程序完成无限滚动列

日期:2021-01-08 类型:行业动态 

关键词:制作小程序,小程序商城,扫码点餐小程序,微信小程序开店的步骤,牛刀小程序

微信小程序实现无限滚动列表       这篇文章主要为大家详细介绍了微信小程序实现无限滚动列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图1.0

实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical=‘true'设置同时显示的滑块数量:display-multiple-items=‘4'设置自动轮播:autoplay:‘true'.

话不所说,直接上代码:

 !-- 底部排名 -- 
 view 
 view 
 text id='0' data-id='0' 获奖名单 /text 
 /view 
 swiper vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items='4' 
 view 
 block wx:for-index="idx" wx:for='{{aa}}' 
 swiper-item 
 view 
 image src='{{item.avatarUrl}}' /image 
 text {{item.nickName}} /text 
 text 获得奖金{{item.reward}}元 /text 
 /view 
 /swiper-item 
 /block 
 /view 
 /swiper 
 /view