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


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复制对象使用说明
Jun 28 Javascript
JS定时刷新页面及跳转页面的方法
Jul 04 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
jQuery把表单元素变为json对象
Nov 06 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
react 国际化的实现代码示例
Sep 14 Javascript
Vue使用mixin分发组件的可复用功能
Sep 01 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
微信小程序自定义轮播图
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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP中使用cURL实现Get和Post请求的方法
2013/03/13 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
jQuery+slidereveal实现的面板滑动侧边展出效果
2015/03/14 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
Angular+Node生成随机数的方法
2017/06/16 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
使用Python的Django框架结合jQuery实现AJAX购物车页面
2016/04/11 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python脚本后台执行方式
2019/12/21 Python
通过实例解析python and和or使用方法
2020/11/14 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
庆元旦广播稿
2014/02/10 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书