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


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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
Easyui form combobox省市区三级联动
Jan 13 Javascript
Bootstrap开发实战之响应式轮播图
Jun 02 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Move.js入门
Feb 08 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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 Memcache 中实现消息队列
2009/11/24 PHP
提高php运行速度的一些小技巧分享
2012/07/03 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
JS实现数组去重,显示重复元素及个数的方法示例
2019/01/21 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
2019/02/01 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
ionic2.0双击返回键退出应用
2019/09/17 Javascript
在Django的模板中使用认证数据的方法
2015/07/23 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
分分钟入门python语言
2018/03/20 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
python求绝对值的三种方法小结
2019/12/04 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
cf搞笑广告词
2014/03/14 职场文书
2015年度保密工作总结
2015/04/24 职场文书
党员个人承诺书
2015/04/27 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js