189 8069 5689
这篇文章主要介绍微信小程序列表下拉刷新及上拉加载怎么实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
铁力网站制作公司哪家好，找创新互联建站！从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作，到程序开发，运营维护。创新互联建站从2013年成立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法
微信小程序为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);
}最后附上布局代码：