微信小程序之列表下拉刷新和上拉加载的实践

九尾鱼| 阅读:128 发表时间:2018-08-08 15:05:24 小程序开发

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

20170113215329441.png

微信小程序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>
本文由九尾鱼发表并编辑,转载此文章须经作者同意,并请附上出处及本页链接。如有侵权,请联系本站删除。