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


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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
原生JS实现左右箭头选择日期实例代码
Mar 14 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
JS原型对象操作实例分析
Jun 06 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
将二维数组转为一维数组的2种方法
2014/05/26 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
javascript深入理解js闭包
2010/07/03 Javascript
jQuery.prototype.init选择器构造函数源码思路分析
2013/02/05 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jQuery中dequeue()方法用法实例
2014/12/29 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
详解vue移动端日期选择组件
2018/02/22 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
2018/07/07 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
2019/09/16 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
pyside写ui界面入门示例
2014/01/22 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
python实现操作文件(文件夹)
2019/10/31 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
法国体育用品商店:GO Sport
2019/10/23 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
Chemist Warehouse中文网:澳洲连锁大药房
2021/02/05 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
感恩之星事迹材料
2014/05/03 职场文书
年度考核表个人总结
2015/03/06 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
拙作再改《我的收音机情缘》
2022/04/05 无线电
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers