Skip to content

UView-Plus 返回顶部组件无效果

难绷程度

😡红温了
😶无语了✅
😅流汗了

环境

node: v22.11.0
uview-plus: 3.3.50
uniapp: 8.0.5
vue: 3.5.1

demo复现

vue
<template>
	<view>
        <Article :articleText="articleText"></Article>
    </view>
</template>

<script setup>
import ref from 'vue'
import Article from '@/components/Article.vue'

// 长文本
const articleText = ref('123……')
</script>
vue
<template>
	<view>
        <up-back-top 
			:scroll-top="scrollTop"
			icon="arrow-up"
			z-index="9999"
			duration="300"
			>
		</up-back-top>
        <view>{{ articleText }}</view>
    </view>
</template>

<script setup>
import ref from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'

const {
    articleText
} = defineProps({
    articleText: {
    	default: ''
    }
})

const scrollTop = ref(0)

onPageScroll((e) => {
	scrollTop.value = e.scrollTop
})
</script>

父组件About.vue引入组件Article.vue后,下滑时,页面右下角没有出现返回顶部的按钮,且控制台没有报错。
查询相关文档后,子组件Article.vue需要将onPageScroll导出

vue
<script>
export default {
	onPageScroll() {}
}
</script>

难绷的地方来了,导出onPageScroll后,父组件About.vue只需要带有onPageScroll关键字Uniapp会自动引入该方法

vue
<script setup>
// 有 onPageScroll 关键字就行
import ref from 'vue'
import { onPageScroll } from '@dcloudio/uni-app'

// 长文本
const articleText = ref('123……')
</script>

成了,返回顶部按钮能正常显示了。