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

最新推荐文章于 2025-09-30 01:43:26 发布

原创

最新推荐文章于 2025-09-30 01:43:26 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

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

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