做外汇门户网站,天骏手表网站,网站上传后,户县住房和城乡建设局官方网站实现思路#xff1a; 创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。 创建一个vue文件用来制作底部tabbar组件。 使用vuex存储用户的身份信息,根据身份信息切换tabbar组合。 具体步骤#xff1a; 新建一个tabbar.js文件#xff0c;将…实现思路 创建一个js文件用来存放所有的tabbar,不同的数组表示不同的tabbar组合。 创建一个vue文件用来制作底部tabbar组件。 使用vuex存储用户的身份信息,根据身份信息切换tabbar组合。 具体步骤 新建一个tabbar.js文件将不同的tabbar组合用不同的数组表示出来。
// 公共页面
export const publicBar [{pagePath: /pages/home/index,iconPath: require(/static/logo.png),selectedIconPath: require(/static/logo2.jpg),text: 首页},{pagePath: /pages/car/index,iconPath: require(/static/logo.png),selectedIconPath: require(/static/logo.png),text: 购物车}
]// 自己的页面
export const selfBar [{pagePath: /pages/home/index,iconPath: require(/static/logo.png),selectedIconPath: require(/static/logo.png),text: 首页},{pagePath: /pages/mine/index,iconPath: require(/static/logo.png),selectedIconPath: require(/static/logo.png),text: 我的},
] 创建一个vue文件编写底部tabbar组件代码。
templateview classtabbar-listview classtabbar-item v-for(item, index) in tabBarList :keyindex clickchangeActive(item, index)image classimg :srcactiveIndex index ? item.selectedIconPath : item.iconPath/imageview{{ item.text }}/view/view/view
/templatescriptimport {mapState,mapMutations} from vuexexport default {data() {return {}},computed: {...mapState(tabBarModule, [activeIndex, tabBarList]),},methods: {...mapMutations(tabBarModule, [setUserInfo, changeIndex]),// 修改点击的tabbar项changeActive(item, index) {this.changeIndex(index)uni.switchTab({url: item.pagePath})},},mounted() {// 模拟登录后获取的用户信息,public为公共模块,非public为我的模块this.setUserInfo(public)// this.setUserInfo(mine) 用这个进行切换就能看到不同的底部tabbar}}
/script
style langscss scoped.tabbar-list {display: flex;position: fixed;bottom: 0;width: 100%;height: 100rpx;border: 1px solid #ccc;overflow: hidden;.tabbar-item {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;.img {width: 50rpx;height: 50rpx;}}}
/style 在根目录创建store文件夹,在store文件夹下创建module文件夹和创建index.js文件,在module文件夹下面创建tabBarModule.js文件。 在tabBarModule.js文件中编写vuex代码,然后在store文件夹下面的index.js文件中引入tabBarModule.js文件作为一个模块。
// 引入两个tabbar组合
import {publicBar,selfBar
} from /utils/tabbar.js
export default {// 开启命名空间namespaced: true,// 存放基础数据state: {// 用户信息userInfo: uni.getStorageSync(userInfo) || ,// 初始化一个空的tabbar组合tabBarList: [],// 当前选中的tabbar项控制页面刷新导航高亮位置不变activeIndex: uni.getStorageSync(acIndex) || 0, },mutations: {// 保存用户信息setUserInfo(state, token) {uni.setStorageSync(userInfo, token)state.userInfo token;// 根据用户信息切换tabbar组合token ! public ?state.tabBarList selfBar :state.tabBarList publicBar},// 记录当前选中的tabbar项changeIndex(state, index) {uni.setStorageSync(acIndex, index)state.activeIndex index}},
}
在index.js文件中引入tabBarModule模块,并且在mian.js中引入store
import tabBarModule from /store/module/tabBarModule.js
import Vue from vue
import Vuex from vuex
Vue.use(Vuex)
export default new Vuex.Store({modules: {tabBarModule}
}) 在每个页面引入刚才的底部tabbar组件,并且使用uni.hideTabBar()隐藏默认导航栏
附上page.json文件供参考
{pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/home/index,style: {navigationBarTitleText: home}},{path: pages/mine/index,style: {navigationBarTitleText: mine}},{path: pages/car/index,style: {navigationBarTitleText: car}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: #F8F8F8},uniIdRouter: {},tabBar: {list: [{pagePath: pages/home/index},{pagePath: pages/mine/index},{pagePath: pages/car/index}]}
} 原文链接https://blog.csdn.net/weixin_47190975/article/details/129353819
亲测有效另外点击退出后重新登录跳转首页activeIndex不会自动切换即tab栏激活项未切换在登录成功跳转首页前添加this.changeIndex(0)即可
