微信小程序实现无限滚动列表(滚动新闻动态列表)

Posted 2021-03-10 与f

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

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

话不所说，直接上代码：

<!-- 底部排名 -->
  <view class=\'contentBottom\'>
    <view class=\'BottomFirst\'>
      <text id=\'0\' data-id=\'0\'>获奖名单</text>
    </view>
    <swiper class="tab-right" style=\'background:{{bgColor}};\' vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items=\'4\'>
      <view class="right-item">
        <block wx:for-index="idx" 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>
  </view>

 

 

 

/* 底部滚动列表 */
.contentBottom {
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #f8e1da;
}
.BottomFirst {
  width: 90%;
  display: flex;
  justify-content: space-around;
  border: 1px solid #663a83;
  box-sizing: border-box;
  margin: 0 auto;
}
.BottomFirst text {
  width: 100%;
  text-align: center;
  font-size: 30rpx;
  color: #663a83;
  line-height: 60rpx;
  border-right: 1px solid #663a83;
  box-sizing: border-box;
}
.BottomFirst text:nth-child(1){
  border: none;
}
.tab-right {
  width: 90%;
  margin: 20rpx auto;
  height: 405rpx;
}
.right-item {
  padding: 0 20rpx;
  background: #fbeeed;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.content-item {
  height: 100rpx;
  border-bottom: 1px solid #ede1d4;
  width: 95%;
}
.avater {
  height: 50rpx;
  width: 50rpx;
  border-radius: 100rpx;
  margin-top: 25rpx;
  float: left;
}
.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;
}

 

 

 

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"
      },
    ],
}

 

 

 

 

 

转： https://www.jb51.net/article/150116.htm