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>
希望本文所述对大家微信小程序设计有所帮助。