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

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

效果图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"
      },
    ],
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序 列表的上拉加载和下拉刷新的实现

    微信小程序可谓是9月21号之后最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会让移动端App颠覆,让移动端的程序员失业,身为一个Android开发者我是不相信的,即使有,那也是需要个一两年的过度和打磨才能实现的吧. 不管微信小程序是否能颠覆当今的移动开发格局,我们都要积极向上的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们来开始学习列表的上拉加载和下拉刷新的实现吧(通过聚合数据

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 微信小程序实现城市列表选择

    本文实例为大家分享了小程序实现城市列表选择的具体代码,供大家参考,具体内容如下 实现效果预览   实现功能简介 城市的选择 按中文/拼音/首字母条件搜索 按首字字母快速定位到城市位置 目录结构 主要代码 app.js App({ globalData: { trainBeginCity: '杭州', trainEndCity: '北京' } }) app.json { "pages":[ "pages/index/index", "pages/citys/

  • 微信小程序 下拉列表的实现实例代码

    微信小程序 下拉列表 wxml代码: <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png" class="personal_image {{selectArea ? 'r

  • 微信小程序之下拉列表实现方法解析(附完整源码)

    一.效果图 二.实现原理 跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果.然后下拉的动画的通过 css3 的 animation 来实现的. CSS3中添加的新属性 animation 是用来为元素实现动画效果的,但是animation无法单独担当起实现动画的效果.承载动画的另一个属性 -- @keyframes.使用的时候为了兼容可加上-webkit-.-o-.-ms-.-mo

  • 微信小程序实现列表下拉刷新上拉加载

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 原理 利用微信小程序的onPullDownRefresh函数(下拉刷新监听函数)和onReachBottom函数(上拉加载监听函数)监听页面的下拉和上拉动态,从而对页面数据进行修改! 页面配置JSON enablePullDownRefresh:开启下拉刷新: onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为px. { "enablePullDown

  • 微信小程序实现点击图片旋转180度并且弹出下拉列表

    本文为大家分享了微信小程序实现图片旋转.下拉列表的具体代码,供大家参考,具体内容如下 正文: 先上效果图: index.wxml <view class="phone_one" bindtap="clickPerson"> <view class="phone_personal">{{firstPerson}}</view> <image src="../../image/v6.png"

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

    本文实例为大家分享了微信小程序实现无限滚动列表的具体代码,供大家参考,具体内容如下 效果图1.0 实现方式是利用小程序原声组件swiper,方向设置为纵向 :vertical='true'设置同时显示的滑块数量:display-multiple-items='4'设置自动轮播:autoplay:'true'. 话不所说,直接上代码: <!-- 底部排名 --> <view class='contentBottom'> <view class='BottomFirst'>

  • 微信小程序实现数字滚动动画

    本文实例为大家分享了微信小程序实现数字滚动效果的具体代码,供大家参考,具体内容如下 效果图 实现思路 1.为了实现数字的无限滚动效果,每个数字框的内部,其实包含了两组0~9的view,每个View的高度都一样2.数字框内使用绝对定位,通过调整top位置,显示出指定的数字3.使用transtion动画,top发生变化时就会滚动,然后通过指定动画的delay.duration,使数字之间延时动画 项目代码 js文件 // components/scroll-number/index.js Compo

  • 微信小程序点击滚动到指定位置的实现

    公司项目要做一个类似微信通讯录导航的效果,点击右侧字母页面滚动到相应位置. 因为微信小程序没有dom概念,所以不能使用锚点,也不能直接获取对应字母相对页面的偏移位置.此时只能使用小程序创建对象实例的API获取节点信息: let query = wx.createSelectorQuery().in(this); query.selectViewport().scrollOffset() query.select("#Nav").boundingClientRect(); query.s

  • 微信小程序全屏滚动字幕的实现方法详解

    目录 一.实现背景 二.实现代码 三.滚动速度 四.后续优化 实现效果 一.实现背景 无意中在某音上看到用手机横屏作为广告屏的视频,大部分都是用第三方软件实现的: 以及在汽车后挡风玻璃放置提醒字样的视频,这种基本是要花钱买屏幕,通过手机控制屏幕内容: 遂想实现这种效果 二.实现代码 1,滚动字幕 zimu.wxml,界面布局,很简单,没啥特别的,顶部一个返回按钮,为了不影响整体效果,可以把这个按钮做成透明的图片放上去:除了那个按钮剩下的就是滚动的字幕组件了 <!--pages/zimu/zimu

  • 微信小程序开发之好友列表字母列表跳转对应位置

    微信小程序开发之好友列表字母列表跳转对应位置 前言: 在小程序里实现微信好友列表点击右侧字母列表跳转对应位置效果.写了个demo,核心部分很简单,所以没多少注释,如果遇到问题就加群问我吧. 核心技术点: 1.小程序scroll-view组件的scroll-into-view, scroll-with-animation. scroll-y属性. 2.小程序的touch事件的应用. 3.Js定时器的应用. view页面代码: index.wxml class="container" sc

  • 微信小程序实现给循环列表添加点击样式实例

    微信小程序实现给循环列表添加点击样式实例 微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: <view class="taga"> <view class="tag-title">标签</view> <view class="tag-box"> <vie

  • 微信小程序实现图片滚动效果示例

    本文实例讲述了微信小程序实现图片滚动效果.分享给大家供大家参考,具体如下: 效果:左右滑动可以切换展示图片 代码: <!--pages/test/test.wxml--> <!-- 组件 --> <swiper> <swiper-item wx:for="{{imgUrls}}"> <image src='{{item}}' width="335" height="150" mode='wid

  • 微信小程序页面上下滚动效果

    本文实例为大家分享了微信小程序页面上下滚动的具体代码,供大家参考,具体内容如下 看图 源码 <view class="container container-fill"> <view class="scroll-fullpage" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrol

  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下 先看效果是否是自己需要的 实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J

  • 解决微信小程序中的滚动穿透问题

    Mask-Scroll > 原码地址 * 蒙层防穿透问题 > 蒙层穿透就是,当你用fixed 布局让蒙层显示的时候, 手指滑动屏幕会出现底部内容也滑动的现象. 如图: 当蒙层出现的时候,你滚动屏幕,底部内容也一起跟着滚动. 这就是蒙层穿透, 也可以叫 '滚动穿透'. 当然出现这种情况, 用户体验当然是不好的了. 所以作为一个有点追求的工程师当然是不允许这种情况的发生了(手动狗头...) ## 解决方案 这种要分情况, 当蒙层没有滚动条的时候. 当蒙层出现滚动条的时候 1. 当弹窗没有滚动条的时

随机推荐