滚动操作
滚动底部触发事件
滚动到底部/右边,会触发 scrolltolower 事件
html
<scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
</scroll-view>
<scroll-view class="main_box" scroll-y="true" @scrolltolower="lower">
</scroll-view>
滚动到底加载更多
淘宝的滚动到底请求数据方案
- 滚动不出现toast加载中弹窗,而是在最底部显示一行灰色的loading图标+加载文本,不仔细看都看不到
- 一次渲染大概十几条数据
- 应当滚动时就请求下次数据,避免滚动卡顿
csdn的滚动到底请求数据方案
- 骨架屏站位
自定义开局启动动画
https://ext.dcloud.net.cn/plugin?id=73751
下拉刷新
全局开启下拉刷新
在pages.json
文件的globalStyle
对象中开启enablePullDownRefresh
属性
js
"globalStyle": {
"enablePullDownRefresh": true
},
"globalStyle": {
"enablePullDownRefresh": true
},
单个页面
开启下拉刷新
在pages.json
文件中的pages
数组中找到对应的页面,并在对应页面的style
属性中开启enablePullDownRefresh
添加 onPullDownRefresh生命周期函数
或者在vue文件中添加 onPullDownRefresh生命周期函数,特定功能完成后,使用uni.stopPullDownRefresh()
,来终止刷新,否则则一直刷新
滚动底部
页面触发
onReachBottom
scroll-view触发
https://uniapp.dcloud.net.cn/component/scroll-view.html#scroll-view
scroll-view滚动到底或右@scrolltolower
方法
滚动顶部
onPageScroll
监听页面滚动
uni.pageScrollTo
设置滚动到的位置和动画时长
js
<script>
export default {
data() {
return {
showBackTop: false
},
onPageScroll(e) {
this.showBackTop = e.scrollTop > 500 ? true : false;
},
methods: {
scrollTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 100
})
}
}
}
</script>
<script>
export default {
data() {
return {
showBackTop: false
},
onPageScroll(e) {
this.showBackTop = e.scrollTop > 500 ? true : false;
},
methods: {
scrollTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 100
})
}
}
}
</script>