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

怼烎@ 2024-04-17 16:06 58阅读 0赞

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

**wxml**

<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() { 
    
        },
    
    
    })