网络营销公司搭建平台,seo策划方案,营销型 手机网站,建设网站的市场背景前言
使用小程序默认的tabbar可以满足常规开发#xff0c;但是满足不了个性化需求#xff0c;如果想个性化开发就需要用到自定义tabbar,以下图为例子
一、在app.json配置
先按照以往默认的形式配置#xff0c;如果中间的样式特殊则不需要配置
tabBar: {但是满足不了个性化需求如果想个性化开发就需要用到自定义tabbar,以下图为例子
一、在app.json配置
先按照以往默认的形式配置如果中间的样式特殊则不需要配置
tabBar: {custom:true, // 开启自定义tabbarcolor: #333333, // tabbar文字默认颜色selectedColor: #2E41FF, // tabbar文字选中颜色list: [{pagePath: pages/index/index,iconPath: images/customTabBar/home.png,selectedIconPath: images/customTabBar/homeSelect.png,text: 首页},{pagePath: pages/user/user,iconPath: images/customTabBar/my.png,selectedIconPath: images/customTabBar/mySelect.png,text: 我的}]
},二、在app.js中配置
tabBar: {color: #333333,selectedColor: #2E41FF,list: [{pagePath: /pages/index/index,iconPath: /images/customTabBar/home.png,selectedIconPath: /images/customTabBar/homeSelect.png,text: 首页,selected:true //该tabbar是否选中的标识},{pagePath: ,iconPath: /images/customTabBar/camera.png,selectedIconPath: /images/customTabBar/camera.png,isSpecial: true, //是否为特殊的那个tabselected:false},{pagePath: /pages/user/user,iconPath: /images/customTabBar/my.png,selectedIconPath: /images/customTabBar/mySelect.png,text: 我的,selected:false}]
}三、app.js注册tabbar点击方法
主要作用为控制跳转的路径当前tab及选中的样式
editTabbar() {let tabbar this.globalData.tabBar;let currentPages getCurrentPages();let _this currentPages[currentPages.length - 1];let pagePath _this.route;(pagePath.indexOf(/) ! 0) (pagePath / pagePath);for (let i in tabbar.list) {tabbar.list[i].selected false;(tabbar.list[i].pagePath pagePath) (tabbar.list[i].selected true);}_this.setData({tabbar: tabbar});
},四、封装自定义tabbar组件
1.html
view classub-tab-barblock wx:for{{tabbar.list}} wx:keyindex!-- 中间特殊tab --view wx:if{{item.isSpecial}} classub-tab-bar-item bindtapcameraimage modewidthFix src{{item.iconPath}} class{{item.pagePath ? ub-camera : }}/imageview{{item.text}}/view/view!-- 两侧tab -- navigator wx:else classub-tab-bar-item hover-classnone url{{item.pagePath}} stylecolor:{{item.selected ? tabbar.selectedColor : tabbar.color}} open-typeswitchTabimage modewidthFix src{{item.selected ? item.selectedIconPath : item.iconPath}}/imageview{{item.text}}/view/navigator/block
/view2.json
接收父组件传过来的值
properties: {tabbar: {type: Object}
},五、在用到的页面引用tabbar组件
在需要用到tabbar的页面引用
1.json中引用 usingComponents: {tabBar: /components/customTabBar/customTabBar,}2.js
data中获取在app.js定义的tabBar
data: {tabBar:app.globalData.tabBar
}
//隐藏移动的tabbar并调用app.js定义的方法
onLoad(){wx.hideTabBar()app.editTabbar();
}3.html中引用
获取到的方法想子组件中传递
tabBar tabbar{{tabBar}}/tabBar
