位置: IT常识 - 正文
uniapp+uView自定义底部tabBer(uniapp自定义组件模式)
编辑：rootadmin推荐整理分享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-bar5.在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高亮位置对应
上一篇：不可以运行的Linux命令:破坏系统(不能运行windows10的设备有哪些)
下一篇：kenserv.exe是什么进程 有什么作用 kenserv进程查询(keyemain.exe是什么)