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


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 相关文章推荐
入门基础学习 ExtJS笔记(一)
Nov 11 Javascript
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
May 15 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
Oct 25 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 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
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
2016/03/29 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
2019/03/07 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python 返回汉字的汉语拼音
2009/02/27 Python
简单讲解Python中的闭包
2015/08/11 Python
python学生信息管理系统
2018/03/13 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python 字符串常用函数详解
2019/09/11 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
中药专业自荐信范文
2014/03/18 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
交通事故和解协议书
2015/01/27 职场文书
武夷山导游词
2015/02/03 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
秋菊打官司观后感
2015/06/03 职场文书
Vue+Flask实现图片传输功能
2022/04/01 Vue.js