uni-app滚动视图容器(scroll-view)之监听上拉事件
实现
现在要实现一个功能。一个列表,上加载更多数据。页面如下。
因此,可滚动视图区域。滚动区域页面展示思路如下:
<scroll-view scroll-y="true" @scrolltolower="scroll" style="height: 100vh;"> <!-- uni-list列表 --> <!-- uni-load-more 滚动条 --> <!-- 注:需要设置滚动条高度 --> </scroll-view>
其中,scroll为上拉事件的方法,请根据实际情况引用。
methods: { scroll() { console.log("加载列表的方法") } }
注:看了官方文档和仔细思考。从性能和样式角度分析,这个场景更是和使用页面触底事件:onReachBottom。此示例不恰当。
参考网址
- https://uniapp.dcloud.io/component/scroll-view
- https://blog.csdn.net/weixin_45805132/article/details/110927978
有志者,事竟成,破釜沉舟,百二秦关终属楚; 苦心人,天不负,卧薪尝胆,三千越甲可吞吴。