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


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调用后台的三种方法实例
Oct 17 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
理解jQuery stop()方法
Nov 21 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
Apr 30 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 Javascript
简单分析javascript中的函数
Sep 10 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
php数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
使用PHP实现微信摇一摇周边红包
2016/01/04 PHP
如何在PHP中使用数组
2020/06/09 PHP
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
javascript下4个跨浏览器必备的函数
2010/03/07 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
2015/06/24 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
第一次动手实现bootstrap table分页效果
2016/09/22 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
原生js实现随机点名
2020/07/05 Javascript
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
罗技美国官网:Logitech美国
2020/01/22 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
商场经理竞聘演讲稿
2014/01/01 职场文书
搞笑创意广告语
2014/03/17 职场文书
人事聘任通知
2015/04/21 职场文书
2015年班组建设工作总结
2015/05/13 职场文书