uniapp+uView自定义底部tabBer(uniapp自定义组件模式)

uniapp+uView自定义底部tabBer

推荐整理分享uniapp+uView自定义底部tabBer(uniapp自定义组件模式)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp引用uview,uniapp使用uview,uni-app自定义组件,uniapp自定义组件模式,uniapp自定义picker,uniapp自定义组件模式,uni-app自定义组件,uniapp使用uview,内容如对您有帮助，希望把文章链接给更多的朋友！

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.jsimport 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.jsimport 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高亮位置对应