126 lines
3.7 KiB
Vue
126 lines
3.7 KiB
Vue
<template>
|
|
<view class="start-index">
|
|
<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
|
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
|
<Home ref="home"></Home>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
|
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
|
<Service ref="service"></Service>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
|
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
|
<Discovery ref="discovery"></Discovery>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
|
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
|
<Pizz ref="pizz"></Pizz>
|
|
</scroll-view>
|
|
</view>
|
|
<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
|
|
<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
|
|
<User ref="user"></User>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<tn-tabbar :outHeight="140" :height="120" v-model="currentIndex" :list="tabbarList" activeColor="#3377FF"
|
|
inactiveColor="#AAAAAA" activeIconColor="#3377FF" inactiveIconColor="#8A8E99" :animation="true"
|
|
:safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Home from './home.vue'
|
|
import Service from './service.vue'
|
|
import Discovery from './discovery.vue'
|
|
import Pizz from './pizz.vue'
|
|
import User from './user.vue'
|
|
|
|
export default {
|
|
components: {
|
|
Home,
|
|
Service,
|
|
Discovery,
|
|
Pizz,
|
|
User
|
|
},
|
|
data() {
|
|
return {
|
|
// 底部tabbar菜单数据
|
|
tabbarList: [{
|
|
title: '首页',
|
|
activeIcon: '/static/01_1.png',
|
|
inactiveIcon: '/static/01.png'
|
|
},
|
|
{
|
|
title: '协会活动',
|
|
activeIcon: '/static/02_2.png',
|
|
inactiveIcon: '/static/02.png'
|
|
},
|
|
{
|
|
// 服务、案例、品牌、合作、发现、探索
|
|
activeIcon: '/static/05.png',
|
|
inactiveIcon: '/static/05.png',
|
|
iconSize: 100,
|
|
out: true
|
|
},
|
|
{
|
|
title: '发现',
|
|
activeIcon: '/static/03_3.png',
|
|
inactiveIcon: '/static/03.png'
|
|
},
|
|
{
|
|
title: '个人中心',
|
|
activeIcon: '/static/04_4.png',
|
|
inactiveIcon: '/static/04.png'
|
|
}
|
|
],
|
|
// tabbar当前被选中的序号
|
|
currentIndex: 0,
|
|
// 自定义底栏对应页面的加载情况
|
|
tabberPageLoadFlag: []
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const index = Number(options.index || 0)
|
|
// 根据底部tabbar菜单列表设置对应页面的加载情况
|
|
this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
|
|
return index === tabbar_index
|
|
})
|
|
this.switchTabbar(index)
|
|
},
|
|
methods: {
|
|
// 切换导航
|
|
switchTabbar(index) {
|
|
this._switchTabbarPage(index)
|
|
},
|
|
|
|
|
|
// 瀑布流导航页面滚动到底部
|
|
tabbarPageScrollLower(e) {
|
|
if (this.currentIndex === 1) {
|
|
//this.$refs.comm.getRandomData && this.$refs.comm.getRandomData()
|
|
}
|
|
},
|
|
|
|
// 切换导航页面
|
|
_switchTabbarPage(index) {
|
|
wx.vibrateShort();
|
|
const selectPageFlag = this.tabberPageLoadFlag[index]
|
|
if (selectPageFlag === undefined) {
|
|
return
|
|
}
|
|
if (selectPageFlag === false) {
|
|
this.tabberPageLoadFlag[index] = true
|
|
}
|
|
this.currentIndex = index
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
</style> |