uniapp:scroll-view触底加载、下拉刷新、返回顶部
选择uniapp自带的下拉刷新还是scroll-view看场景。场景:从首页跳转到别的页面再返回来的时候,直接返回首页顶部。顺便解决了ios下拉,顶部和底部有白屏的问题。
·
1. swiper禁止滑动
<swiper-item @touchmove.stop='stopTouchMove'></swiper-item>
//禁止swiper滑动
stopTouchMove() {
return false
},
2. scroll-view触底加载
uniapp-scrollView
顺便解决了ios下拉,顶部和底部有白屏的问题
{
"path": "pages/index/index",
"style": {
"enablePullDownRefresh": false,
"disableScroll": true//pages.json里面加这个
}
},
<template>
<scroll-view scroll-y="true" :enhanced="true" :bounces="false" :show-scrollbar="false" @scrolltolower="touchBottom"
:lower-threshold='50'>
<view>内容</view>
</scroll-view>
</template>
<script>
export default {
data(){
return {
isloading: false,
}
},
methods:{
// 触底加载
touchBottom() {
if (this.isloading) return
if (!this.anhuiCheck) {
if (this.totalPage > this.pageNum) {
this.pageNum++;
this.searchGoods(this.queryGoods.parentCatId, this.typeCheck);
} else {
uni.$showMsg('暂无其他商品')
}
}
},
}
}
</script>
<style lang="scss">
.body {
width: 100%;
height: 100vh;
}
</style>
3. scroll-view下拉刷新的问题
选择uniapp自带的下拉刷新还是scroll-view看场景
选择哪一个,点这个链接
scroll-view下拉刷新
4. scroll-view回顶部
场景:从首页跳转到别的页面再返回来的时候,直接返回首页顶部
点击跳转文章
更多推荐
已为社区贡献2条内容
所有评论(0)