小程序--自定义下啦刷新

花絮:最近公司项目让写小程序，碰到的一个问题就是下啦刷新，如果小程序自带的下啦刷新，就会造成，整个界面的下啦刷新或者上啦加载，造成UI整体上啦。项目经理就不同意了，再次就自己写了一个下啦刷新和上啦加载，第一次写小程序和js，会有很多bug或者写法错误，请各位多多包涵了。Demo地址

废话说了那么多，还是先看下效果图吧

image

image

注意：当你的item的高度没有办法达到scroll-view高度的时候，并且想要下啦刷新时，需要设置item的margin-top设置一个很小的值即可

image

1.下啦刷新使用

1.下载项目到本地：将wj_refresh文件拖进自己的项目中，里面包含三个文件js、wxss、wxml.

image

2,在使用下啦刷新的页面page的wxml文件中引入刷新的布局wxml，注意引入时候的路径一定要写对，不然不会有效果

image

3,在使用下啦刷新的页面page的wxss文件中引入刷新的布局样式，注意引入时候的路径一定要写对，不然不会有效果
引入下啦刷新的wxss文件 @import '../../utils/wj_refresh/wj_refresh.wxss';

image

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

image

5,在使用下啦刷新的页面page的js文件中初始化，下啦刷新刷新控件，并告诉下啦刷新scroll-view的高度,用于上啦自动加载方法使用(上啦自动加载方法调用时机：当scroll-view滚动到距离底部为60px的时候调用)

image

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

6,设置监听scroll-view的滚动,一定要设置scroll-view的滚动方法里面调用，并将scroll-view传递过去,并在手指移动开的调用方法touchEnd方法

image

/**
* 滚动调用的方法
*/
wj_scrollAction(even) {
var that = this;
that.scroll({
  scroll: even,
  pullDownAction: () => { /// 下啦刷新回掉的方法

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

  }
})
},
/**
 * 手指离开屏幕调用的方法
 */
wj_touchEndAction() {
  this.touchEnd();
},

7.在回掉成功后，不需要刷新的地方记得结束刷新that.endScroll({ noMoreData: true }); true表示，没有数据，不需要刷新，false表示下页还有数据

image

/// 结束刷新
that.endScroll({ noMoreData: false });

Demo地址

大家可以进群学习交流，一起分享更多的面试题和精彩的demo QQ：2673218363 QQ群：725611317