本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法。分享给大家供大家参考，具体如下：
微信小程序为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="/UploadFiles/2021-04-02/refresh.png">
希望本文所述对大家微信小程序设计有所帮助。
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。