所属分类：php教程
程序员必备接口测试调试工具：立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试，同时在线协作，内容实时同步
在进行列表数据展示的时候，如果数据比较多或者更新比较快，就需要提供上拉刷新和下拉加载的功能，让提升用户的体验。【相关学习推荐：小程序开发教程】
当我们使用scroll-view滑动组件展示列表时，其本身就存在下拉刷新和上拉加载的触发函数
微博登录
QQ登录
登录后复制引入line-ui框架
这里我使用的下拉刷新和上拉加载展示组件是lin-ui框架提供的，这里我说下如何引入lin-ui框架：
lin-ui官方文档地址
//在小程序项目目录中执行下面的函数
npm install lin-ui
登录后复制然后在需要引入组件的页面的json文件中进行引入
"usingComponents": {
"l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
"l-loading":"/miniprogram_npm/lin-ui/loading/index",
},登录后复制这样lin-ui组件就引入成功了
js代码编写
data: {
downfresh:false,//底部加载展示控制
upfresh:false//顶部加载展示控制
},登录后复制首先在data中设置加载组件是否显示，默认都不显示
下拉刷新js代码
//下拉刷新
refresh(){
if(this.data.upfresh){
console.log("还没刷新完成")
return;
}
var that = this;
this.setData({
upfresh: true,
// upfresh:false
})
setTimeout(function() {
//updateData为自己的数据更新逻辑代码
that.updateData(true,()=>{
that.setData({
upfresh: false,
});
})
// wx.hideLoading();
console.info('下拉刷新加载完成.');
}, 500);
},
//更新数据
updateData:function(tail, callback) {
var that = this;
console.log("updatedata-=-=seea"+that.data.searchValue)
wx.request({
url: app.gBaseUrl + 'compony-detail/page',
method: 'GET',
data: {
page: 0,
count: 20,
componyname:that.data.searchValue
},
success: (res) => {
this.setData({
componys: res.data
})
if (callback) {
callback();
}
}
})
},登录后复制上拉加载js代码
/**
* 滑动到底部加载更多
*/
getMore(){
// downloadingData=this.data.downloadingData
if(this.data.downfresh){
console.log("还没加载完成")
return;
}
var that = this;
this.setData({
downfresh: true,
// upfresh:false
})
this.setData({
downloadingData: true
// upfresh:false
})
setTimeout(function() {
that.loadData(true,()=>{
that.setData({
downfresh: false
});
})
// wx.hideLoading();
console.info('上拉数据加载完成.');
}, 1000);
},
loadData: function(tail, callback) {
var that = this;
wx.request({
url: app.gBaseUrl + 'compony-detail/page',
method: 'GET',
data: {
page: that.data.componys.length,
count: 20,
componyname:that.data.searchValue
},
success: (res) => {
// console.log(JSON.stringify(res.data))
that.setData({
componys: that.data.componys.concat(res.data),
});
if (callback) {
callback();
}
}
})
},登录后复制整个下拉刷新和上拉加载的功能我们就已经实现了，主要就是利用到了scroll-view的组件特性，根据触发的时机来控制记载组件的显隐，整体实现并不是很难，具体代码可根据自己的实际情况做适当调整哦。
更多编程相关知识，请访问：编程视频！！
以上就是浅谈小程序中下拉刷新和上拉加载功能怎么实现？（附代码）的详细内容，更多请关注zzsucai.com其它相关文章！
