onPullDownRefresh onReachBottom
时间: 2024-05-23 21:14:21 浏览: 12
`onPullDownRefresh`和`onReachBottom`是小程序中的两个页面事件。
`onPullDownRefresh`是下拉刷新事件,当用户下拉页面时触发,可以用于更新页面数据或重新加载页面。
`onReachBottom`是上拉加载事件,当页面滚动到底部时触发,可以用于实现分页加载更多数据。
在小程序中,可以在页面的js文件中定义这两个事件,并在相应的事件处理函数中编写相应的业务逻辑。例如,当用户下拉页面时,可以调用接口获取最新数据并更新页面;当页面滚动到底部时,可以调用接口获取更多数据并渲染到页面上。
相关问题
onPullDownRefresh onReachBottom uniapp
`onPullDownRefresh`和`onReachBottom`是uniapp框架中的两个页面事件钩子函数。
`onPullDownRefresh`是下拉刷新事件,当用户下拉页面时会触发该事件。通常在该函数中编写数据刷新的逻辑。
`onReachBottom`是上拉触底事件,当用户滑动页面到底部时会触发该事件。通常在该函数中编写加载更多数据的逻辑。
在uniapp中,可以在页面的.vue文件中声明这两个事件钩子函数,并在需要的时候编写对应的逻辑即可。
onPullDownRefresh: function() { this.jiazai2(); }, onReachBottom: function() { var i = this; i.data.is_last || app.util.request({ url: "entry/wxapp/Api", data: { m: "ox_reclaim", r: "me.takeLog", uid: wx.getStorageSync("uid"), page: i.data.page + 1 }, success: function(a) { a.data.data.list.length < 1 && i.setData({ is_last: !0 }); for (var t = i.data.list, e = 0; e < a.data.data.list.length; e++) t.push(a.data.data.list[e]); i.setData({ list: t, page: i.data.page + 1 }); } }); }, jiazai2: function() { var t = this; app.util.request({ url: "entry/wxapp/Api", data: { m: "ox_reclaim", r: "me.takeLog", uid: wx.getStorageSync("uid"), page: 1 }, success: function(a) { t.setData({ list: a.data.data.list, page: 1, is_last: !1 }); } }); } });
这段代码是小程序中一个页面的下拉刷新和上拉加载的实现。在 onPullDownRefresh 函数中,调用 jiazai2 函数来重新加载第一页的数据。在 onReachBottom 函数中,首先判断 is_last 是否为真,如果是,则不再加载;否则,向服务器请求下一页的数据。如果请求成功,将返回的数据列表与原来的数据列表合并,并将页数加 1。最后,通过 setData 函数将新的数据列表赋值给 list 数组。jiazai2 函数的实现与 onReachBottom 函数中的请求类似,只是将页数设置为 1。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)