花絮:最近公司項目讓寫小程序，碰到的一個問題就是下啦刷新，如果小程序自帶的下啦刷新，就會造成，整個界面的下啦刷新或者上啦加載，造成UI整體上啦。項目經(jīng)理就不同意了，再次就自己寫了一個下啦刷新和上啦加載，第一次寫小程序和js，會有很多bug或者寫法錯誤，請各位多多包涵了。Demo地址

聲明:此文章為七秒一字一字敲起來，難免會有錯別字，請海涵。

廢話說了那么多，還是先看下效果圖吧

2018-02-09 11.33.01.gif

2018-02-09 11.34.10.gif

注意：當你的item的高度沒有辦法達到scroll-view高度的時候，并且想要下啦刷新時，需要設置item的margin-top設置一個很小的值即可

image.png

1.下啦刷新使用

1.下載項目到本地：將wj_refresh文件拖進自己的項目中，里面包含三個文件js、wxss、wxml.

image.png

2,在使用下啦刷新的頁面page的wxml文件中引入刷新的布局wxml，注意引入時候的路徑一定要寫對，不然不會有效果

image.png

3,在使用下啦刷新的頁面page的wxss文件中引入刷新的布局樣式，注意引入時候的路徑一定要寫對，不然不會有效果
引入下啦刷新的wxss文件 @import '../../utils/wj_refresh/wj_refresh.wxss';

image.png

4 在使用下啦刷新的頁面page的js文件中引入刷新的布局的js,
引入刷新控件jsconst wj_refresh = require('../../utils/wj_refresh/wj_refresh.js')

image.png

5,在使用下啦刷新的頁面page的js文件中初始化，下啦刷新刷新控件，并告訴下啦刷新scroll-view的高度,用于上啦自動加載方法使用(上啦自動加載方法調(diào)用時機：當scroll-view滾動到距離底部為60px的時候調(diào)用)

image.png

  /// 初始化下啦刷新控件
 this.setData({
  scrollHeight: wx.getSystemInfoSync().windowHeight
})
wj_refresh.init.apply(this, [this.data.scrollHeight]);

6,設置監(jiān)聽scroll-view的滾動,一定要設置scroll-view的滾動方法里面調(diào)用，并將scroll-view傳遞過去,并在手指移動開的調(diào)用方法touchEnd方法

image.png

/**
* 滾動調(diào)用的方法
*/
wj_scrollAction(even) {
var that = this;
that.scroll({
  scroll: even,
  pullDownAction: () => { /// 下啦刷新回掉的方法

  },
  pullOnAction: () => { /// 上啦加載更多方法

  }
})
},
/**
 * 手指離開屏幕調(diào)用的方法
 */
wj_touchEndAction() {
  this.touchEnd();
},

7.在回掉成功后，不需要刷新的地方記得結(jié)束刷新that.endScroll({ noMoreData: true }); true表示，沒有數(shù)據(jù)，不需要刷新，false表示下頁還有數(shù)據(jù)

image.png

/// 結(jié)束刷新
that.endScroll({ noMoreData: false });

聲明:此文章為七秒一字一字敲起來，難免會有錯別字，請海涵。
Demo地址
你的關(guān)注和喜歡是七秒前進的動力
你的關(guān)注和喜歡是七秒前進的動力
你的關(guān)注和喜歡是七秒前進的動力