基于uniapp使用uview-ui模板实现动态更改底部tabbar

基于Uview官方的模板更改，文末附代码

模板下载地址:资源下载 | uView - 多平台快速开发的UI框架 - uni-app UI框架

 初始的Tabbar文件

 且每个文件都有this.tabbar = [...]

 page.json文件的tabBar

以下是对源文件实现对动态更改tabbar

 1.在pages中添加多几个页面，我只添加了名为test的页面

2.删除list中除pagePath中的内容，问就是网络不好时别的东西会被加载出来,所有tabbar被一览无余。

3.照官方的说法把tabbar放入vuex中统一管理,引入Uview改良过的vuex,记得main.js也要引入相应的数据

4.在导航页改写onLonad

5.实现效果

这里user_or_shop为0

这里user_or_shop为1

代码

vuex

store/$u.mixin.js   Uview原版没改

import { mapState } from 'vuex'
import store from "@/store"

// 尝试将用户在根目录中的store/index.js的vuex的state变量，全部加载到全局变量中
let $uStoreKey = [];
try{
	$uStoreKey = store.state ? Object.keys(store.state) : [];
}catch(e){
	
}

module.exports = {
	created() {
		// 将vuex方法挂在到$u中
		// 使用方法为：如果要修改vuex的state中的user.name变量为"史诗" => this.$u.vuex('user.name', '史诗')
		// 如果要修改vuex的state的version变量为1.0.1 => this.$u.vuex('version', '1.0.1')
		this.$u.vuex = (name, value) => {
			this.$store.commit('$uStore', {
				name,value
			})
		}
	},
	computed: {
		// 将vuex的state中的所有变量，解构到全局混入的mixin中
		...mapState($uStoreKey)
	}
}

store/index.js   只改了state中的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

let lifeData = {};

try{
	// 尝试获取本地是否存在lifeData变量，第一次启动APP时是不存在的
	lifeData = uni.getStorageSync('lifeData');
}catch(e){
	
}

// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = ['vuex_user', 'vuex_token'];

// 保存变量到本地存储中
const saveLifeData = function(key, value)
{
	// 判断变量名是否在需要存储的数组中
	if(saveStateKeys.indexOf(key) != -1) 
	{
		// 获取本地存储的lifeData对象，将变量添加到对象中
		let tmp = uni.getStorageSync('lifeData');
		// 第一次打开APP，不存在lifeData变量，故放一个{}空对象
		tmp = tmp ? tmp : {};
		tmp[key] = value;
		// 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
		uni.setStorageSync('lifeData', tmp);
	}
}

const store = new Vuex.Store({
	// 下面这些值仅为示例，使用过程中请删除
	state: {
		// 如果上面从本地获取的lifeData对象下有对应的属性，就赋值给state中对应的变量
		// 加上vuex_前缀，是防止变量名冲突，也让人一目了然
		vuex_user: lifeData.vuex_user ? lifeData.vuex_user : {name: '明月'},
		vuex_token: lifeData.vuex_token ? lifeData.vuex_token : '',
		// 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
		vuex_version: '1.0.1',
		
		user_or_shop: 1, //0为用户1为商家
		
		// userTabBar
		vuex_user_tabBer : [{
				iconPath: "/static/uview/example/component.png",
				selectedIconPath: "/static/uview/example/component_select.png",
				text: '组件',
				isDot: true,
				pagePath: "/pages/index/index"
			},
			{
				iconPath: "/static/uview/example/js.png",
				selectedIconPath: "/static/uview/example/js_select.png",
				text: '工具',
				midButton: true,
				pagePath: "/pages/js/index"
			},
			{
				iconPath: "/static/uview/example/template.png",
				selectedIconPath: "/static/uview/example/template_select.png",
				text: '我的',
				pagePath: "/pages/test/index"
			}
		],
		// shopTabBar
		vuex_shop_tabBer : [{
				iconPath: "/static/uview/example/component.png",
				selectedIconPath: "/static/uview/example/component_select.png",
				text: '组件',
				isDot: true,
				pagePath: "/pages/index/index"
			},
			{
				iconPath: "/static/uview/example/js.png",
				selectedIconPath: "/static/uview/example/js_select.png",
				text: '工具',
				midButton: true,
				pagePath: "/pages/js/index"
			},
			{
				iconPath: "/static/uview/example/template.png",
				selectedIconPath: "/static/uview/example/template_select.png",
				text: '模板',
				pagePath: "/pages/template/index"
			}
		],
		
	},
	mutations: {
		$uStore(state, payload) 
		{
			// 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
			let nameArr = payload.name.split('.');
			let saveKey = '';
			let len = nameArr.length;
			if(nameArr.length >= 2) 
			{
				let obj = state[nameArr[0]];
				for(let i = 1; i < len - 1; i ++) {
					obj = obj[nameArr[i]];
				}
				obj[nameArr[len - 1]] = payload.value;
				saveKey = nameArr[0];
			} 
			else 
			{
				// 单层级变量，在state就是一个普通变量的情况
				state[payload.name] = payload.value;
				saveKey = payload.name;
			}
			// 保存变量到本地，见顶部函数定义
			saveLifeData(saveKey, state[saveKey])
		}
	}
})

export default store

新增的页面pages/test/index.vue，其余页面的onload均和该页面一样

<template>
	<view>
		我是shop
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello uView',
				tabbar: ''
			}
		},
		methods: {
			
		},
		onLoad()
		{
			this.tabbar = this.user_or_shop === 1 ? this.vuex_shop_tabBer : this.vuex_user_tabBer
		}
		
	}
</script>

<style>

</style>

pages.json

{
	"easycom": {
		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
	},
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uView UI"
			}
		},
		{
			"path": "pages/js/index",
			"style": {
				"navigationBarTitleText": "工具"
			}
		},
		{
			"path": "pages/template/index",
			"style": {
				"navigationBarTitleText": "模板"
			}
		}, 
		{
			"path": "pages/test/index",
			"style": {
				"navigationBarTitleText": "test"
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uView UI",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#909399",
		"selectedColor": "#303133",
		"backgroundColor": "#FFFFFF",
		"borderStyle": "black",
		"list": [{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/js/index"
			},
			{
				"pagePath": "pages/test/index"
			},
			{
				"pagePath": "pages/template/index"
			}
			
		]
	}
}

mian.js

import Vue from 'vue'
import App from './App'
import store from '@/store';

Vue.config.productionTip = false

App.mpType = 'app'

// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);
let vuexStore = require("@/store/$u.mixin.js");
Vue.mixin(vuexStore);

const app = new Vue({
	store,
    ...App
})
app.$mount()

我特么找了一个晚上，要么不能用，要么讲的什么鬼，要么我不会，还下载了一个进去后发现缺文件，我....退钱!!!! 还好偶然下了官方的包。