微信小程序列表下拉刷新及上拉加载怎么实现 - 行业资讯

　　介绍

这篇文章主要介绍微信小程序列表下拉刷新及上拉加载怎么实现,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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

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

<>强效果图

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

<强>方法一:用滚动视图组件实现

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

scroll-into-view字符串值应为某子元素id,则滚动到该元素,元素顶部对齐滚动区域顶部
bindscrolltoupper EventHandle滚动到顶部/左边,会触发scrolltoupper事件
bindscrolltolower EventHandle滚动到底部/右边,会触发scrolltolower事件
bindscroll EventHandle滚动时触发<代码> event.detail={scrollLeft、scrollTop scrollHeight, scrollWidth,△,δy}

<强>方法二:用页面页面自带的功能

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

<强> 1,在应用程序。json页设置窗口前景色为黑色,允许下拉

“window": { 　　“backgroundTextStyle"才能:“dark" 　　“navigationBarBackgroundColor"才能:,“# 000“, 　　“navigationBarTitleText"才能:,“wechat" 　　“navigationBarTextStyle"才能:“white" 　　“enablePullDownRefresh"才能:真实　　}

<强> 2,在列表中。json页设置允许下拉

{ 　　“enablePullDownRefresh"才能:真实　　}

<强> 3,利用onPullDownRefresh监听用户下拉动作

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

onPullDownRefresh:,()函数,{ 　　,wx.showNavigationBarLoading(),//在标题栏中显示加载　　,let newwords =,[{消息:& # 39;从天而降& # 39;,viewid: & # 39; 1 & # 39;,时间:util.formatTime (new 日期),问候:& # 39;你好# 39;}].concat (this.data.words); 　　,setTimeout(()=祝辞,{ 　　,,this.setData ({ 　　,,,,话说:newwords 　　,,}) 　　,,wx.hideNavigationBarLoading(),//完成停止加载　　,,wx.stopPullDownRefresh(),//停止下拉刷新　　,,},2000) 　　}

<强> 4,利用onReachBottom页面上拉触底事件

注:,首次进入页面,如果页面不满一屏时会触发> onReachBottom:函数(){ 　　console.log才能(& # 39;你好# 39;) 　　if 才能;(this.data.loading),返回; 　　this.setData才能({,加载:true }); 　　updateRefreshIcon.call才能(这个); 　　var 才能;words =, this.data.words.concat([{消息:& # 39;土生土长& # 39;,viewid: & # 39; 0 & # 39;,时间:util.formatTime (new 日期),问候:& # 39;你好# 39;})); 　　setTimeout(才能,()=祝辞{ 　　,,,this.setData ({ 　　,,,,加载:,假的, 　　,,,,话说:单词　　,,,}) 　　,,},2000) 　　,} 　　})

<强> 5,上划加载图标动画

/* * 　　*大敌;旋转刷新图标　　,*/function updateRefreshIcon (), { 　　,var deg =, 0; 　　,console.log(& # 39;旋转开始了..... & # 39;) 　　,var animation =, wx.createAnimation ({ 　　,时间:1000年, 　　,}); 　　,var timer =, setInterval(,()=祝辞{ 　　if 才能;(this.data.loading !) 　　,,clearInterval(计时器); 　　animation.rotateZ才能(度).step();//在Z轴旋转一个度角度　　+=deg 才能;360; 　　this.setData({才能　　,,,refreshAnimation: animation.export () 　　})才能　　,},2000); 　　}

最后附上布局代码:

& lt; view 天气:为=皗{词语}}“,类=癷tem-container"比; 　　& lt;才能view 类=癷tems"比; 　　,,,& lt; view 类=發eft"比; 　　,,,,,,& lt; view 类=癿sg"在{{item.message}} & lt;/view> 　　,,,,,,& lt; view 类=皌ime"在{{item.time}} & lt;/view> 　　,,,& lt;/view> 　　,,,& lt; view 类=皉ight"在{{item.greeting}} & lt;/view> 　　& lt;才能/view> 　　& lt;/view> 　　& lt; view 类=皉efresh-block",天气:如果=皗{加载}}“比; 　　,& lt; image 动画=皗{refreshAnimation}}“, src=https://www.yisu.com/zixun/resources/refresh.png ">