花絮:最近公司项目让写小程序,碰到的一个问题就是下啦刷新,如果小程序自带的下啦刷新,就会造成,整个界面的下啦刷新或者上啦加载,造成UI整体上啦。项目经理就不同意了,再次就自己写了一个下啦刷新和上啦加载,第一次写小程序和js
,会有很多bug
或者写法错误,请各位多多包涵了。Demo地址
声明:此文章为七秒一字一字敲起来,难免会有错别字,请海涵。
废话说了那么多,还是先看下效果图吧
注意:当你的
item
的高度没有办法达到scroll-view
高度的时候,并且想要下啦刷新时,需要设置item的margin-top
设置一个很小的值即可
1.下啦刷新使用
1.下载项目到本地:将
wj_refresh
文件拖进自己的项目中,里面包含三个文件js、wxss、wxml
.
2,在使用下啦刷新的页面
page
的wxml
文件中引入刷新的布局wxml
,注意引入时候的路径一定要写对,不然不会有效果
3,在使用下啦刷新的页面
page
的wxss
文件中引入刷新的布局样式
,注意引入时候的路径一定要写对,不然不会有效果
引入下啦刷新的wxss文件@import '../../utils/wj_refresh/wj_refresh.wxss';
4 在使用下啦刷新的页面
page
的js
文件中引入刷新的布局的js
,
引入刷新控件jsconst wj_refresh = require('../../utils/wj_refresh/wj_refresh.js')
5,在使用下啦刷新的页面
page
的js
文件中初始化,下啦刷新刷新控件,并告诉下啦刷新scroll-view
的高度,用于上啦自动加载
方法使用(上啦自动加载方法调用时机:当scroll-view
滚动到距离底部为60px的时候调用)
/// 初始化下啦刷新控件
this.setData({
scrollHeight: wx.getSystemInfoSync().windowHeight
})
wj_refresh.init.apply(this, [this.data.scrollHeight]);
6,设置监听
scroll-view
的滚动,一定要设置scroll-view
的滚动方法里面调用,并将scroll-view
传递过去,并在手指移动开的调用方法touchEnd
方法
/**
* 滚动调用的方法
*/
wj_scrollAction(even) {
var that = this;
that.scroll({
scroll: even,
pullDownAction: () => { /// 下啦刷新回掉的方法
},
pullOnAction: () => { /// 上啦加载更多方法
}
})
},
/**
* 手指离开屏幕调用的方法
*/
wj_touchEndAction() {
this.touchEnd();
},
7.在回掉成功后,不需要刷新的地方记得结束刷新
that.endScroll({ noMoreData: true });
true表示,没有数据,不需要刷新,false表示下页还有数据
/// 结束刷新
that.endScroll({ noMoreData: false });
声明:此文章为七秒一字一字敲起来,难免会有错别字,请海涵。
Demo地址
你的关注和喜欢是七秒前进的动力
你的关注和喜欢是七秒前进的动力
你的关注和喜欢是七秒前进的动力