微信小程序實現無限滾動列表(滾動新聞動態列表)

本文實例為大家分享了微信小程序實現無限滾動列表的具體代碼，供大家參考，具體內容如下

實現方式是利用小程序原聲組件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