Browse Source

1.动态隐藏tabbar导航

2.优化nav导航
master
邓平艺 4 years ago
parent
commit
02e5ef56db
  1. 8
      components/index-nav/index-nav.less
  2. 10
      components/lf-tabbar/lf-tabbar.vue
  3. 3
      pages/index/index/index.vue
  4. 17
      store/index.js

8
components/index-nav/index-nav.less

@ -7,11 +7,15 @@
flex-wrap:wrap;
padding: 10px 0 0 0;
// width: 890rpx;
width: 1000rpx;
// width: 1000rpx;
width: 1100rpx;
.nav-item{
padding:0px 0px 10px 0px;
// width: 25%;
width: 13.8%;
// width: 13.8%;
width: 12.5%;
// width: 68.97px;
// height: 73px;
text-align: center;

10
components/lf-tabbar/lf-tabbar.vue

@ -5,8 +5,9 @@
<view class="tabbar-box">
<view class="tab-item"
:class="{'tab-active': currentTabBar == index}"
:style="{'width': 100 / tabbars.length +'%'}"
:style="{'width': 100 / show_count +'%'}"
@click="clickTab(item, index)"
v-if="item.show"
v-for="(item, index) in tabbars" :key="index">
<view class="tab-icon">
<text class="lf-font-40 lf-iconfont" :class="item.icon"></text>
@ -29,7 +30,7 @@
},
data(){
return {
show_count: 0
}
},
computed: {
@ -42,11 +43,16 @@
let tabbars = this.tabbars;
let tabbar_name = tabbars[this.currentTabBar].path;
let current = 0;
let show_count = 0;
tabbars.map((item, index) => {
if(item.path == '/'+ page){
current = index;
}
if(item.show){
show_count++;
}
})
this.show_count = show_count;
if(tabbar_name != '/'+ page){
this.$store.commit('setCurrentTabBar', current);
}

3
pages/index/index/index.vue

@ -385,6 +385,9 @@
this.microData = '';
this.microData = res.data;
this.is_show_init = true;
let show_discover = this.$isRight(res.data.discover_status);
this.$store.commit('setTabbarItemShow', {index: 2, is_show: show_discover});
if (res.data && res.data.micro_page) {
wx.setNavigationBarTitle({
title: res.data.micro_page.name

17
store/index.js

@ -9,25 +9,29 @@ let state = {
name: 'home',
text: '首页',
icon: 'icon-xianxingicon-03',
path: '/pages/index/index/index'
path: '/pages/index/index/index',
show: true
},
{
name: 'brand',
text: '品牌',
icon: 'icon-pinpailiebiao',
path: '/pages/index/category/category'
path: '/pages/index/category/category',
show: true
},
{
name: 'find',
text: '发现',
icon: 'icon-faxian',
path: '/pages/discover/discover'
path: '/pages/discover/discover',
show: true
},
{
name: 'my',
text: '会员中心',
icon: 'icon-icon',
path: '/pages/user/my/center'
path: '/pages/user/my/center',
show: true
}
],
isShowTabBar: true
@ -45,6 +49,11 @@ let mutations = {
// 隐藏tabbar
hideTabBar(state, data){
state.isShowTabBar = false;
},
// 设置某个tabbar项显示隐藏
setTabbarItemShow(state, data){
let { index, is_show } = data;
state.tabbars[index].show = is_show;
}
}

Loading…
Cancel
Save