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

最新推荐文章于 2024-03-12 14:47:22 发布

H_c_l

最新推荐文章于 2024-03-12 14:47:22 发布

阅读量1.2k

点赞数

分类专栏：小程序js

本文链接：https://blog.csdn.net/H_c_l/article/details/100118336

版权

本文介绍了如何使用微信小程序的swiper组件，通过设置垂直滚动、显示多项目及自动轮播属性，来创建一个无限滚动的列表效果。具体实现涉及wxml、wxss和js文件的配置。

摘要由CSDN通过智能技术生成

实现方式是利用小程序原声组件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}}'