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


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 相关文章推荐
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
JavaScript快速调试的两个技巧
Nov 04 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
Laravel实现表单提交
2017/05/07 PHP
js 事件小结 表格区别
2007/08/13 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
js中关于一个分号的崩溃示例
2013/11/11 Javascript
php跨域调用json的例子
2013/11/13 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
vue 打包后的文件部署到express服务器上的方法
2017/08/09 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
python的绘图工具matplotlib使用实例
2014/07/03 Python
浅析PHP与Python进行数据交互
2018/05/15 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
职称自我鉴定
2013/10/15 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
施工单位安全责任书
2014/07/24 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
五一劳动节慰问信
2015/02/14 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
公司搬迁通知
2015/04/20 职场文书
计划生育目标责任书
2015/05/09 职场文书