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


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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
javascript prototype 原型链
Mar 12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
URL地址中的#符号使用说明
Feb 12 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
JsDom 编程小结
Aug 09 Javascript
JQuery $.each遍历JavaScript数组对象实例
Sep 01 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
js实现转动骰子模型
2019/10/24 Javascript
js实现自定义右键菜单
2020/05/18 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
python实现的一个p2p文件传输实例
2014/06/04 Python
Python argv用法详解
2016/01/08 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python表格存取的方法
2018/03/07 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
基于Django统计博客文章阅读量
2019/10/29 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
已安装tensorflow-gpu,但keras无法使用GPU加速的解决
2020/02/07 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
一套C++笔试题面试题
2012/06/06 面试题
高二英语教学反思
2014/01/19 职场文书
商场主管竞聘书
2014/03/31 职场文书
公务员诚信承诺书
2014/05/26 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
生活委员竞选稿
2015/11/21 职场文书
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL