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


Posted in Javascript onNovember 27, 2017

本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法。分享给大家供大家参考,具体如下:

微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把。微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理。本文将分享微信小程序列表的下拉刷新和上划加载的实践。

效果图

首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画、下拉刷新结果、上划加载动画以及上划加载结果,程序中的数据均为模拟数据,不包含网络请求,所以可以直接运行。

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

方法一:用scroll-view组件实现

由于最后没有选择这种实现方法(下拉刷新有bug),因此只做简单介绍,当然如果没有下拉刷新的需求,scroll-view组件实现列表的渲染很方便,从官方文档可以看到,scroll-view组件集成了以下方法为编程提供很大便捷。

scroll-into-view String 值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发 event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

方法二:用page页面自带的功能

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

1、在app.json页设置窗口前景色为dark & 允许下拉

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

2、在list.json页设置允许下拉

{
  "enablePullDownRefresh": true
}

3、利用onPullDownRefresh监听用户下拉动作

注:在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动无法触发onPullDownRefresh,因此在使用 scroll-view 组件时无法利用page的该特性。

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4、利用onReachBottom页面上拉触底事件

注:,首次进入页面,如果页面不满一屏时会触发 onReachBottom ,应为只有用户主动上拉才触发;手指上拉,会触发多次 onReachBottom,应为一次上拉,只触发一次;所以在编程时需要将这两点考虑在内。

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

5、上划加载图标动画

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

最后附上布局代码:

<view wx:for="{{words}}" class="item-container">
  <view class="items">
    <view class="left">
       <view class="msg">{{item.message}}</view>
       <view class="time">{{item.time}}</view>
    </view>
    <view class="right">{{item.greeting}}</view>
  </view>
</view>
<view class="refresh-block" wx:if="{{loading}}">
 <image animation="{{refreshAnimation}}" src="../../resources/refresh.png"></image>
</view>

希望本文所述对大家微信小程序设计有所帮助。

Javascript 相关文章推荐
javascript生成/解析dom的CDATA类型的字段的代码
Apr 22 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
JS采用绝对定位实现回到顶部效果完整实例
Jun 20 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
javascript局部自定义鼠标右键菜单
Dec 08 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 #Javascript
解读vue生成的文件目录结构及说明
Nov 27 #Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
Nov 27 #Javascript
基于vue2.0实现简单轮播图
Nov 27 #Javascript
Vue父子模版传值及组件传值的三种方法
Nov 27 #Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 #Javascript
vue-awesome-swiper滑块插件使用方法详解
Nov 27 #Javascript
You might like
PHP - Html Transfer Code
2006/10/09 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
给ECShop添加最新评论
2015/01/07 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
详解JavaScript添加给定的标签选项
2018/09/17 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
vue v-model的用法解析
2020/10/19 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python生成随机MAC地址
2015/03/10 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
Python实战购物车项目的实现参考
2019/02/20 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
SHEIN香港:价格实惠的女性时尚服装
2018/08/14 全球购物
个人简历的自荐信
2013/10/23 职场文书
节能减排倡议书
2014/04/15 职场文书
企业贷款委托书格式
2014/09/12 职场文书