首页 > 课堂 > 小程序 > 正文

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

2020-03-21 16:08:01
字体:
来源:转载
供稿:网友

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

微信小程序,无限滚动列表

效果图1.0

实现方式是利用小程序原声组件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'>              <image src='{{item.avatarUrl}}' class='avater'></image>              <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"      },    ],}

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VEVB武林网。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表