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


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 相关文章推荐
Prototype Template对象 学习
Jul 19 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
javascript面向对象入门基础详细介绍
Sep 05 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
JS截取字符串实例详解
Nov 24 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
vue移动端弹框组件的实例
Sep 25 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
Vue 中使用 typescript的方法详解
Feb 17 Javascript
在JavaScript中如何使用宏详解
May 06 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
JavaScript语言核心数据类型和变量使用介绍
2013/08/23 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
jquery实现手机号码选号的方法
2015/07/31 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
layui点击导航栏刷新tab页的示例代码
2018/08/14 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
vue视频播放插件vue-video-player的具体使用方法
2019/11/08 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
[40:13]Ti4 冒泡赛第二天 iG vs NEWBEE 2
2014/07/15 DOTA
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python的面向对象思想分析
2015/01/14 Python
python字典快速保存于读取的方法
2018/03/23 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
对python调用RPC接口的实例详解
2019/01/03 Python
python set内置函数的具体使用
2019/07/02 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
社区庆中秋节活动方案
2014/02/07 职场文书
人力资源经理的岗位职责
2014/03/02 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
2015年暑期见闻
2015/07/14 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电