加强局网站建设报告,淘宝网网页版首页登录入口,单位写材料素材网站,渠道招商因项目需要自定义底部导航栏#xff0c;我把它写在了组件里#xff0c;基于uView2框架写的#xff08;vue2#xff09;#xff1b; 一、代码 在components下创建tabbar.vue文件#xff0c;代码如下#xff1a;
templateviewu-tabbar :valuec…因项目需要自定义底部导航栏我把它写在了组件里基于uView2框架写的vue2 一、代码 在components下创建tabbar.vue文件代码如下
templateviewu-tabbar :valuecurrent?current:0 changechangeTab :fixedtrue :placeholderfalse:safeAreaInsetBottomtrue :borderfalse activeColor#40c6a2 inactiveColor#B9BCBFu-tabbar-item v-for(item,index) in list :keyindex :textitem.textimage classu-page__item__slot-icon slotactive-icon :srcitem.selectedIconPath/imageimage classu-page__item__slot-icon slotinactive-icon :srcitem.iconPath/image/u-tabbar-item/u-tabbar/view
/templatescriptexport default {name: TabBar,props: {current: Number},data() {return {list: [{iconPath: /static/images/salesRecords.png,selectedIconPath: /static/images/salesRecords_a.png,pagePath: pages/salesRecords/index,text: 销售记录,customIcon: false,}, {iconPath: /static/images/mine.png,selectedIconPath: /static/images/mine_a.png,pagePath: pages/mine/index,text: 个人中心,customIcon: false,}],}},methods: {// 跳转页面changeTab(e) {uni.switchTab({url: / this.list[e].pagePath,})}}}
/script app.vue有没有大佬知道为什么这个样式加载app.vue里才生效
/* 导航样式 */
.u-tabbar__content {box-shadow: 0rpx 0rpx 10rpx 2rpx rgba(180, 203, 199, 0.4);
}
.u-page__item__slot-icon {width: 40rpx;height: 40rpx;
}二、配置 pages.json配置 tabBar: {custom: true,list: [{pagePath: pages/salesRecords/index}, {pagePath: pages/mine/index}]},
三、使用
页面使用mine.vue 注current是底部导航栏的下标你在tabbar页面的list中写的页面下标从0开始依次递增如我这个mine.vue的下标是1在页面里引用组件时要加上:current1
有不懂的可以留言...
