refactor(ui): 首页添加回到最顶端按钮

This commit is contained in:
2025-10-27 17:43:43 +08:00
parent 6632080b83
commit ca310d6c02
2 changed files with 18 additions and 5 deletions

View File

@@ -3,7 +3,8 @@ export default {
return { return {
showTop: false, showTop: false,
scrollTop: 0, scrollTop: 0,
oldLocation: 0 oldLocation: 0,
minScrollTop: 400, // 内置最小scrollTop值设置, 方便组件自身差异化设置
} }
}, },
methods: { methods: {
@@ -19,7 +20,7 @@ export default {
}, },
onPageScroll(e) { onPageScroll(e) {
this.oldLocation = e.scrollTop; this.oldLocation = e.scrollTop;
if (e.scrollTop > 400) { if (e.scrollTop > this.minScrollTop) {
this.showTop = true; this.showTop = true;
} else { } else {
this.showTop = false; this.showTop = false;

View File

@@ -126,7 +126,7 @@
<!-- 小程序隐私协议 --> <!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif --> <!-- #endif -->
<to-top class="mescroll-totop" v-if="showTop" @toTop="scrollToTopNative()"></to-top>
</view> </view>
</template> </template>
@@ -135,13 +135,22 @@
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue'; import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import diyJs from '@/common/js/diy.js'; import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js'; import indexJs from './public/js/index.js';
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
export default { export default {
data() {
return {
minScrollTop: 200,
}
},
components: { components: {
uniPopup, uniPopup,
nsNavbar nsNavbar,
toTop
}, },
mixins: [diyJs, indexJs] mixins: [diyJs, indexJs, scroll]
}; };
</script> </script>
@@ -190,6 +199,9 @@
font-size: 60rpx; font-size: 60rpx;
} }
.mescroll-totop {
bottom: 100px !important;
}
</style> </style>
<style scoped> <style scoped>