71 行
1.7 KiB
Plaintext
71 行
1.7 KiB
Plaintext
<template>
|
||
<scroll-view class="content-page" :scroll-with-animation="true" :scroll-top="targetScrollTop"
|
||
@scroll="handleScroll" >
|
||
<view class="content-page-inner">
|
||
<text class="page-title">首页</text>
|
||
<text class="page-text">这是首页的内容</text>
|
||
<text class="page-text">当前索引: {{ activeIndex }}</text>
|
||
<text class="page-text">\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n点首页tab可滚动回顶部（mid-button示例无效）\n\n\n\n</text>
|
||
</view>
|
||
</scroll-view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
const TAB_CONTENT1_SCROLL_EVENT = 'uni-tab-bar-tab-content1-scroll'
|
||
|
||
// 从父组件注入当前激活的索引
|
||
const activeIndex = inject<Ref<number>>('uniTabBarCurrentIndex', ref(0))
|
||
const currentScrollTop = ref<number>(0)
|
||
const targetScrollTop = ref<number>(0)
|
||
|
||
function handleScroll(event : UniScrollEvent) : void {
|
||
currentScrollTop.value = event.detail.scrollTop
|
||
uni.$emit(TAB_CONTENT1_SCROLL_EVENT, currentScrollTop.value)
|
||
}
|
||
|
||
function scrollToTop() : void {
|
||
targetScrollTop.value = currentScrollTop.value
|
||
nextTick(() => {
|
||
targetScrollTop.value = 0 //TODO 鸿蒙上这个动画太慢太慢了，比其他平台慢很多
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
uni.$emit(TAB_CONTENT1_SCROLL_EVENT, 0)
|
||
})
|
||
|
||
defineExpose({
|
||
scrollToTop
|
||
})
|
||
</script>
|
||
|
||
<style>
|
||
.content-page {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.content-page-inner {
|
||
width: 100%;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
padding: 20px;
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.page-text {
|
||
font-size: 16px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|