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


Posted in Javascript onMay 29, 2020

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js和jquery中循环的退出和继续学习记录
Sep 06 Javascript
将数字转换成大写的人民币表达式的js函数
Sep 21 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
Vue实现boradcast和dispatch的示例
Nov 13 Javascript
微信小程序自定义轮播图
Nov 04 #Javascript
微信小程序实现带缩略图轮播效果
Nov 04 #Javascript
微信小程序使用swiper组件实现层叠轮播图
Nov 04 #Javascript
微信小程序实现下拉菜单切换效果
Mar 30 #Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 #Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
Nov 04 #Javascript
浅谈React碰到v-if
Nov 04 #Javascript
You might like
再说下636单管机
2021/03/02 无线电
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
JS中表单的使用小结
2014/01/11 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
python简单实现操作Mysql数据库
2018/01/29 Python
python pygame实现方向键控制小球
2019/05/17 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
副总经理工作职责
2013/11/28 职场文书
初一体育教学反思
2014/01/29 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
办护照工作证明
2014/10/01 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
技术入股合作协议书
2016/03/21 职场文书