uniapp+uView自定义底部tabBer

HBuilderX和微信开发工具联合开发小程序

一，安装uView2

1.uView安装

2.查看官方文档uView配置

 二，

1.现在pages文件新建四个vue页面

2.在pages.json配置导航栏，因为要在微信开发者工具运行，要配置custom

"tabBar": {
		"custom": true,
		"list": [{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/categry/categry",
				"text": "分类"
			},
			{
				"pagePath": "pages/car/car",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/user",
				"text": "用户"
			}
		]
	},

3.在项目根目录新建文件夹存放自定义组件index.vue并引入

custom-tab-bar

 5.在uView复制需要的tabber代码，这里我用的是--固定在底部(固定在屏幕最下方)

<u-tabbar
	:value="value6"
	@change="name => value6 = name"
	:fixed="true"
	:placeholder="true"
	:safeAreaInsetBottom="true"
>
	<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
	<u-tabbar-item text="放映厅" icon="photo" ></u-tabbar-item>
	<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
	<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
<!-- data -->
value6: 0,

 6.这是还是原生的tabber，需要到App.vue的onLaunch周期添加--uni.hideTabBar()--隐藏原生的tabber

onLaunch: function() {
			console.log('App Launch')
			uni.hideTabBar()
		}

7.此时tabber点击但不跳转，将当前高亮的值存入vuex，新建一个vuex。按照步骤新建store/index.js -

// 页面路径：store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);//vue的插件机制
//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{//存放状态
		"username":"foo",
		"age":18
	}
})
export default store

在 main.js 中导入文件。

// 页面路径：main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.prototype.$store = store
// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
const app = new Vue({
	store,
	...App
})
app.$mount()

阅读uView可知在@change绑定事件中获取到当前高亮索引，然后将active存入state，  在组件通过this.store.state获取active

8.页面刷新时页面位置不变，高亮位置对应vuex的active，用uni.setStorage存储，在beforeupdata前的勾子用uni.getStorage获取，实现页面刷新时页面与tabber高亮位置对应