解决使用 UniApp 搭配 Vue3 小程序开始 使用uview-plus 的返回顶部up-back-top中onPageScroll 不触发的问题

解决使用 UniApp 搭配 Vue3 小程序开始 使用uview-plus 的返回顶部up-back-top中onPageScroll 不触发的问题

页面引入方法都正确 结果方法不触发

<up-back-top :scroll-top="scrollTop"></up-back-top>
<script setup>  
import { ref } from 'vue';  
import { onPageScroll } from '@dcloudio/uni-app';
  
// 创建响应式数据 scrollTop  
const scrollTop = ref(0);  
  
// onPageScroll 方法来更新 scrollTop 的值  
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});
</script>

排查问题后发现 需要注意以下几个问题 否则不会触发箭监听滚动 onPageScroll 方法

第一：最外层盒子容器的 css中 需要设置高度 但是不能设置：overflow: hidden 或者overflow-y: auto或overflow-y: scroll

第二：使用了自定义导航栏 需要设置 navigationStyle: custom

第三：在 pages.json 的页面配置中，需要确保未禁用滚动监听 "disableScroll": false

// pages.json
{
    "pages": [{
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页",
            "disableScroll": false // 确保为 false
        }
    }]
}

完成以上 即可实现返回顶部组件生效

========================================================

如果不想使用组件 自定义方法

<view class="upward" v-if="isShow" @click="Totop()">
   <u-icon name="arrow-upward" color="#434343" size="28"></u-icon>
</view>
<script setup>  
import { ref } from 'vue';  
import { onPageScroll } from '@dcloudio/uni-app';
// 创建响应式数据 scrollTop  
//const scrollTop = ref(0);  
let isShow = ref(false)
// onPageScroll 方法来更新 scrollTop 的值 这个方法需要注意上面三点问题 是否不一致
onPageScroll((e) => {
	//scrollTop.value = e.scrollTop;
	if(e.scrollTop > 400){
		isShow.value = true
	}else{
		isShow.value = false
	}
});
function Totop(){
	uni.pageScrollTo({
       scrollTop: 0,//滚动到页面的目标位置
       duration: 300
   	});
}
</script>