uniapp切换闪屏（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高亮位置对应