110 lines
3.1 KiB
Vue
110 lines
3.1 KiB
Vue
<template>
|
|
<div class="h5-container">
|
|
<div id="homeOut" ref="mainContent" class="main" @scroll="handleScroll">
|
|
<transition :name="transitionName" mode="out-in">
|
|
<router-view />
|
|
</transition>
|
|
</div>
|
|
<!--
|
|
<transition name="fade-scale">
|
|
<div v-show="showBackToTop" class="back-to-top" @click="scrollToTop">
|
|
<div class="back-to-top-icon">
|
|
<svg viewBox="0 0 24 24" fill="none">
|
|
<path d="M12 5L12 19M12 5L6 11M12 5L18 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<div class="back-to-top-text">回顶部</div>
|
|
</div>
|
|
</transition> -->
|
|
|
|
<!-- <div class="tabBar">
|
|
<div
|
|
v-for="tab in tabList"
|
|
:key="tab.id"
|
|
class="tabBar-item"
|
|
:class="{ active: activeTab === tab.id }"
|
|
@click="switchTab(tab)"
|
|
>
|
|
<div class="item-img">
|
|
<img :src="activeTab === tab.id ? tab.activeIcon : tab.icon" :alt="tab.name" />
|
|
</div>
|
|
<div class="item-text">{{ tab.name }}</div>
|
|
<div v-if="activeTab === tab.id" class="active-indicator"></div>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import './media.js'
|
|
|
|
export default {
|
|
name: 'H5HomePage',
|
|
data() {
|
|
return {
|
|
activeTab: 'index',
|
|
tabList: [
|
|
{
|
|
id: 'index',
|
|
name: '首页',
|
|
path: '/h5HomePage/index',
|
|
icon: require('./images/tabBar/home.png'),
|
|
activeIcon: require('./images/tabBar/homeColor.png')
|
|
},
|
|
{
|
|
id: 'about',
|
|
name: '关于我们',
|
|
path: '/h5HomePage/about',
|
|
icon: require('./images/tabBar/user.png'),
|
|
activeIcon: require('./images/tabBar/userColor.png')
|
|
}
|
|
],
|
|
showBackToTop: false,
|
|
scrollThreshold: 200,
|
|
transitionName: 'fade'
|
|
}
|
|
},
|
|
watch: {
|
|
'$route'(to) {
|
|
this.updateActiveTab(to.path)
|
|
this.resetScrollPosition()
|
|
}
|
|
},
|
|
mounted() {
|
|
this.updateActiveTab(this.$route.path)
|
|
this.resetScrollPosition()
|
|
},
|
|
methods: {
|
|
switchTab(tab) {
|
|
if (this.activeTab === tab.id || this.$route.path === tab.path) return
|
|
this.activeTab = tab.id
|
|
this.$router.push(tab.path)
|
|
},
|
|
updateActiveTab(path) {
|
|
this.activeTab = path.endsWith('/about') ? 'about' : 'index'
|
|
},
|
|
resetScrollPosition() {
|
|
this.$nextTick(() => {
|
|
const mainContent = this.$refs.mainContent
|
|
if (mainContent) mainContent.scrollTo({ top: 0, left: 0, behavior: 'auto' })
|
|
window.scrollTo(0, 0)
|
|
document.documentElement.scrollTop = 0
|
|
document.body.scrollTop = 0
|
|
})
|
|
},
|
|
handleScroll() {
|
|
const mainContent = this.$refs.mainContent
|
|
if (mainContent) this.showBackToTop = mainContent.scrollTop > this.scrollThreshold
|
|
},
|
|
scrollToTop() {
|
|
const mainContent = this.$refs.mainContent
|
|
if (mainContent) mainContent.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import url('./less/home/index.less');
|
|
</style>
|