如何在小程序中实现下拉刷新和上拉加载的功能？(带代码)

本文介绍了小程序中实现下拉刷新和上拉加载功能的方法，希望对你有所帮助！

在显示列表数据时，如果数据较多或者更新较快，需要提供上拉刷新和下拉加载的功能，提高用户体验。【相关学习推荐:小程序开发教程】

用下拉刷新和上拉加载编写wxml文件我们用scroll -视图滑动组件展示列表时，有下拉刷新和上拉加载的触发函数。

ltscroll -view class = ；滚动 scroll -y = ；{ { true } } 上限-阈值= 50 bindscrolltoupper = 刷新 style = 高度:700px gt ltL-load more show = ；{ { upfresh } } bindscrolltolower = getMore type = 正在加载 loading -text = ；拼命提神" gt lt/L-loadmore gt； ltL-load more show = ；{ { downfresh } } type = 正在加载 loading -text = ；拼命加载" gt lt/L-loadmore gt；Scroll-y:是否允许垂直滚动，默认为false，这里我们设置为trueupper-threshold:当远离顶部/左侧时，触发scrolltoupper事件(下拉刷新):滚动到顶部/左侧时触发，这里我们设置滚动到顶部时需要触发的函数bindscrolltoupper:滚动到顶部/右侧时触发line-ui框架的引入。

我这里使用的下拉刷新和上拉加载显示组件都是lin-ui框架提供的。在这里，我将告诉你如何介绍lin-ui框架:

Lin-ui官方文档地址

//执行下面的函数npm在applet项目目录下安装lin-ui然后在需要引入组件的页面的json文件中引入。

使用组件 :{ L-loadmore ；: /mini program _ NPM/lin-ui/load more/index ；， L-加载 : /mini program _ NPM/lin-ui/loading/index ；}，从而成功引入了lin-ui组件。

Js代码编写

数据:{downfresh:false，//底部加载显示控件upfresh:false//顶部加载显示控件}。首先，设置加载的组件是否显示在数据中，默认情况下都不显示。

刷新js代码

//下拉refresh(){ if(this . data . upwresh){ console . log("刷新尚未完成")return} var那个=这个；This.setdata ({upwresh: true，//upwresh:false })settimeout(function(){//updatedata更新逻辑代码that.updatedata (true，()= >；{ that.setData({ upfresh: false，})；})//wx . hide loading()；console . info( # 39；下拉加载完成。');}, 500);}，//Update data更新数据:function (tail，callback){ var that = this；控制台. log( ；update data -= -= SEEA ；+that . data . search value)wx . request({ URL:app . gbase URL+ # 39；compony -详细信息/页面 # 39；，方法: # 39；获取 # 39；，data: { page: 0，count: 20，compony name:that . data . search value }，success:(RES)= gt；{ this . setdata({ componys:RES . data })if(callback){ callback()；}}}}}，调出并加载js代码

/* * *滑动到底部加载更多*/get more(){//下载数据= this.data .下载数据If(this . Data . down fresh){ console . log("还没加载完")return} var那个=这个；this.setData({ downfresh: true，//up fresh:false })this . setdata({ downloading data:true//up fresh:false })setTimeout(function(){ that . load data(true，()= gt{ that . setdata({ down fresh:false })；})//wx . hide loading()；console . info( # 39；上拉数据加载完成。');}, 1000);}，loadData: function(tail，callback){ var that = this；wx . request({ URL:app . gbase URL+ # 39；compony -详细信息/页面 # 39；，方法: # 39；获取 # 39；，data:{ page:that . data . componys . length，count: 20，compony name:that . data . search value }，success:(RES)= gt；{//console . log(JSON . stringify(RES . data))that . setdata({ componys:that . data . componys . concat(RES . data)，})；if(回调){ callback()；}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

有关编程的更多信息，请访问:编程视频！!即如何在小程序中实现下拉刷新和上拉加载功能。(代码附后)详情请关注主机参考其他相关文章了解更多！

这几篇文章你可能也喜欢：

• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）

本文由主机参考刊发，转载请注明：如何在小程序中实现下拉刷新和上拉加载的功能？(带代码) https://zhujicankao.com/76606.html