效果图
1.在components文件夹中新建MyTabbar组件
2.组件代码
<template>
<view class="myTabbarBox" :style="{ backgroundColor: backgroundColor }">
<u-tabbar :placeholder="true" zIndex="0" :value="MyTabbarState" @change="tabbarChange" :fixed="false"
:activeColor="tabbarSet.activeColor" :inactiveColor="tabbarSet.inactiveColor" :safeAreaInsetBottom="true">
<u-tabbar-item v-for="(item,index) in tabbarSet.list" :text="item.title">
<image class="u-page__item__slot-icon" slot="active-icon" :src="item.image[1]"></image>
<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.image[0]"></image>
</u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
export default {
data() {
return {
backgroundColor: "#fff",
// MyTabbarState: this.$store.getters.MyTabbarState,
tabbarSet: this.$store.state.tabbarSet,//这里用到了vuex存储数据
};
},
computed: {
MyTabbarState() {
return this.$store.getters.MyTabbarState;
},
},
// watch: {
// MyTabbarState: {
// handler(newVal, oldVal) {
// // console.log('更新', newVal, oldVal)
// },
// deep: true, // 深度监听
// immediate: true, //立即执行
// }
// },
methods: {
//选项切换时
tabbarChange(e) {
console.log('change1', e, this.tabbarSet, this.MyTabbarState);
this.MyTabbarState = e;
this.$store.dispatch('getMyTabbarState', e)
uni.navigateTo({
url: this.tabbarSet.list[e].url
})
}
},
}
</script>
<style lang="scss">
.u-page__item__slot-icon {
width: 41rpx;
height: 44rpx;
}
.myTabbarBox {
position: fixed;
bottom: 0;
left: 0;
z-index: 999999999;
width: 100%;
padding: 30rpx 0;
}
::v-deep.u-tabbar__content {
background-color: transparent;
}
</style>
3.父组件
<template>
<view>
<!-- 底部tabbar -->
<MyTabbar></MyTabbar>
</view>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
let MyTabbarState = 0;
let tabbarSet = {
backgroundColor: "#fff", //背景颜色
activeColor: "#000", //点击后的字体颜色
inactiveColor: "#D0D0D0", //默认字体颜色
list: [{
title: "首页",
image: ["../../static/previousHome.png", "../../static/backHome.png"],
url: "/pages/index/index"
},
{
title: "我的",
image: ["../../static/previousUser.png", "../../static/backUser.png"],
url: "/pages/order/order"
}
]
};
this.$store.dispatch('getTabbarSet', tabbarSet);
this.$store.dispatch('getMyTabbarState', MyTabbarState);
},
onShow() {
//改变底部导航栏状态
this.$store.commit('get_MyTabbarState', 0);
}
}
4.创建store目录，下面创建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const loginKey = 'login_status'
const vuexStore = new Vuex.Store({
state: {
isBtnShow:false,//按钮节流
MyTabbarState:1,//操作栏选中状态
tabbarSet:{}, // 操作栏数据
},
mutations: {
// 操作栏数据
get_tabbarSet(state, goName){
console.log('MUTATION',goName)
state.tabbarSet = goName;
cookie.set('tabbarSet', goName)
},
//操作栏选中状态
get_MyTabbarState(state, goName){
console.log('改变状态',goName)
state.MyTabbarState = goName;
cookie.set('MyTabbarState', goName)
}
},
actions: {
//操作栏选中状态
getMyTabbarState({ state, commit }, force) {
commit('get_MyTabbarState',force)
},
// 操作栏数据
getTabbarSet({ state, commit }, force) {
commit('get_tabbarSet',force)
},
changeIsBtnshow({ state, commit }, index) {
commit('updateIsBtnShow', index)
},
},
getters: {
MyTabbarState:state=>state.MyTabbarState,
tabbarSet:state => state.tabbarSet,
isBtnShow:state => state.isBtnShow
},
strict: debug,
})
export default vuexStore
网友评论