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

 更新时间:2020年05月29日 09:38:10   作者:进阶的码农  
这篇文章主要为大家详细介绍了微信小程序实现无限滚动列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下

效果图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实现通过select标签跳转网页的方法

    JavaScript实现通过select标签跳转网页的方法

    这篇文章主要介绍了JavaScript实现通过select标签跳转网页的方法,涉及javascript事件响应及窗口操作相关技巧,需要的朋友可以参考下
    2016-09-09
  • JavaScript中的继承方式详解

    JavaScript中的继承方式详解

    这篇文章主要介绍了JavaScript中的继承方式详解,本文讲解了js继承的概念、原型式继承与类式继承、原型链继承、类式继承、组合继承、原型式继承等内容,需要的朋友可以参考下
    2015-02-02
  • JavaScript使用Web Worker解析CSV文件的操作方法

    JavaScript使用Web Worker解析CSV文件的操作方法

    在处理大型 CSV 文件时,直接在主线程中解析可能会导致页面卡顿,影响用户体验,使用 Web Worker 可以将计算密集型任务移到后台线程,避免阻塞主线程,从而提升应用的响应速度,所以本文给大家介绍了JavaScript使用Web Worker解析CSV文件的操作方法,需要的朋友可以参考下
    2025-03-03
  • JS验证IP,子网掩码,网关和MAC的方法

    JS验证IP,子网掩码,网关和MAC的方法

    这篇文章主要介绍了JS验证IP,子网掩码,网关和MAC的方法,涉及javascript正则表达式的相关使用技巧,需要的朋友可以参考下
    2015-07-07
  • Firefox 无法获取cssRules 的解决办法

    Firefox 无法获取cssRules 的解决办法

    Firefox 无法获取cssRules 的解决办法...
    2006-10-10
  • JavaScript结合Canvas绘画画运动小球

    JavaScript结合Canvas绘画画运动小球

    这篇文章主要介绍了JavaScript结合Canvas画运动小球,canvas被称为画布,可以结合javascript实现绘制各种图形,制作各种炫酷的动画效果,下面文章更多详细内容介绍需要的小伙伴可以参考一下
    2022-03-03
  • 详解JavaScript数组过滤相同元素的5种方法

    详解JavaScript数组过滤相同元素的5种方法

    本篇文章主要介绍了详解JavaScript数组过滤相同元素的5种方法,详细的介绍了5种实用方法,非常具有实用价值,需要的朋友可以参考下
    2017-05-05
  • 原生js实现弹出层登录拖拽功能

    原生js实现弹出层登录拖拽功能

    这篇文章主要为大家详细介绍了使用原生JavaScript实现弹出层登录拖拽功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 浅谈javascript中的数据类型转换

    浅谈javascript中的数据类型转换

    本文主要对javascript中的数据类型转换进行介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • JavaScript实现文字跟随鼠标特效

    JavaScript实现文字跟随鼠标特效

    这篇文章主要介绍了JavaScript如何实现文字跟随鼠标特效,d代码简单易操作,感兴趣的朋友可以参考下
    2015-08-08

最新评论