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


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 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 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
PHP的explode和implode的使用说明
2011/07/17 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
JavaScript将字符串转换成字符编码列表的方法
2015/03/19 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
新手学习前端之js模仿淘宝主页网站
2016/10/31 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
ES6 javascript的异步操作实例详解
2017/10/30 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
JS实现图片切换效果
2018/11/17 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
Python创建日历实例
2014/08/21 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python3实现转换Image图片格式
2018/06/21 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
高中物理教学反思
2014/02/08 职场文书
揭牌仪式主持词
2014/03/19 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
股东出资证明书范例
2014/10/04 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL