前言
- Hbuilder X 2.7.14.20200618 (不清楚uniapp的版本,用工具版本代替)
- 关于怎么拉:对于下拉还是上拉我是分不清的(不管叫下拉还是上拉,都应该有参照物的。在不说参照物的前提下,叫上拉也行,叫下拉也行。)按照uniapp的说法叫下拉下一页数据。为了避免怎么拉的困境,本文叫做页面触底加载更多。
如何实现
uniapp 内置提供了名为 onReachBottom 的页面生命周期函数。该函数可以实现页面触底加载更多的功能。
页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。具体见下方注意事项。
注意事项
如果用 scroll-view 组件时,这个方法不起作用,请按照 scroll-view 组件的页面触底加载更多的方法处理。
此种情况下,去uniapp的插件市场搜索其它方法。
定义页面底部的触发距离
可在pages.json里定义某个页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"onReachBottonDistance":50 // 距离底部50px时,触发onReachBottom事件
}
},
...
]
onReachBottom 函数
index.vue
<script>
export default {
components: {
},
data() {
return {
}
},
async onLoad(options) {
console.log("onLoad")
},
onReady(){
},
async onReachBottom() {
console.log("onReachBottom");
},
methods: {
}
}
</script>
参考
https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e9%a1%b5%e9%9d%a2%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f
更多推荐
【uniapp】 页面滚动到底部事件/页面触底加载更多(下拉下一页数据)
发布评论