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


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 Eval 函数使用
Mar 23 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
May 15 Javascript
基于JS实现PHP的sprintf函数实例
Nov 14 Javascript
JavaScript中的return语句简单介绍
Dec 07 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
Dec 20 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
vue.js实现简单轮播图效果
Oct 10 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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 执行系统命令的方法
2009/07/07 PHP
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
php查询whois信息的方法
2015/06/08 PHP
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
JS定时器实例
2013/04/17 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js中parseInt函数浅谈
2013/07/31 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript分页功能的实现方法
2015/04/25 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
python实现黑客字幕雨效果
2018/06/21 Python
python flask实现分页的示例代码
2018/08/02 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
基于Django实现日志记录报错信息
2019/12/17 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
消防安全标语
2014/06/07 职场文书
文艺委员竞选稿
2015/11/19 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
Pillow图像处理库安装及使用
2022/04/12 Python