ToB企服应用市场:ToB评测及商务社交产业平台

标题: wx小步伐自定义tabbar [打印本页]
作者: 半亩花草    时间: 2024-6-26 23:48
标题: wx小步伐自定义tabbar
1.在app.json文件中，添加自定义tabbar配置："custom": true
  1.   "tabBar": {
  2.     "custom": true,
  3.     "backgroundColor": "#fafafa",
  4.     "borderStyle": "white",
  5.     "selectedColor": "#40ae36",   
  6.     "color": "#666",
  7.     "list": [
  8.       {
  9.         "pagePath": "pages/index/index",
  10.         "iconPath": "static/images/home.png",
  11.         "selectedIconPath": "static/images/home@selected.png",
  12.         "text": "首页"
  13.       },
  14.       {
  15.         "pagePath": "pages/adoptProduct/adoptProduct",
  16.         "iconPath": "static/images/adopt.png",
  17.         "selectedIconPath": "static/images/adopt@selected.png",
  18.         "text": "认养"
  19.       },
  20.       {
  21.         "pagePath": "pages/supermarket/supermarket",
  22.         "iconPath": "static/images/supermarket.png",
  23.         "selectedIconPath": "static/images/supermarket@selected.png",
  24.         "text": "农副超市"
  25.       },     
  26.       {
  27.         "pagePath": "pages/ucenter/index/index",
  28.         "iconPath": "static/images/my.png",
  29.         "selectedIconPath": "static/images/my@selected.png",
  30.         "text": "我的"
  31.       }
  32.     ]
  33.   }
复制代码
2.新建根目次文件

index.wxml
  1. <view class="tabBar">
  2.   <view class="cont">
  3.     <block wx:for="{{tabBar.list}}" wx:key="index" class="cont-item">
  4.       <view data-path="{{item.pagePath}}" data-index="{{item.pagePath}}" bindtap="switchTab" class="{{item.search?'search':'item'}} {{tabIndex === index ? 'on' : 'off'}}">
  5.         <image src="{{tabIndex === index  ? item.selectedIconPath : item.iconPath}}"></image>
  6.         <view class="txt {{tabIndex === index ? 'selectedColor' : ''}}">{{item.text}}</view>
  7.       </view>
  8.     </block>
  9.   </view>
  10. </view>
复制代码
index.wxss
  1. .tabBar {
  2.   z-index: 100;
  3.   width: 100%;
  4.   position: fixed;
  5.   bottom: 0;
  6.   font-size: 28rpx;
  7.   background-color: #fff;
  8.   color: #636363;
  9. }
  10. .cont {
  11.   z-index: 0;
  12.   height: calc(100rpx + env(safe-area-inset-bottom) / 2);
  13.   padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  14.   padding-bottom: 30rpx;
  15.   display: flex;
  16.   justify-content: space-around;
  17. }
  18. .cont .item {
  19.   font-size: 24rpx;
  20.   position: relative;
  21.   width: 15%;
  22.   text-align: center;
  23.   padding: 0;
  24.   display: block;
  25.   height: auto;
  26.   line-height: 1;
  27.   margin: 0;
  28.   background-color: inherit;
  29.   overflow: initial;
  30.   justify-content: center;
  31.   align-items: center;
  32.   padding-top: 20rpx;
  33. }
  34. .cont .item image {
  35.   width: 50rpx !important;
  36.   height: 50rpx !important;
  37.   margin: auto
  38. }
  39. .cont .selectedColor {
  40.   color: #40ae36;
  41. }
  42. .txt{
  43.   font-size: 24rpx;
  44. }
复制代码
index.js
  1. //获取应用实例
  2. const app = getApp();
  3. Component({
  4.   data: {},
  5.   methods: {
  6.     switchTab(e) {
  7.       const data = e.currentTarget.dataset
  8.       const url = data.path
  9.       wx.switchTab({url})
  10.     }
  11.   }
  12. })
复制代码
index.json
  1. {
  2.   "component": true,
  3.   "usingComponents": {}
  4. }
复制代码
3.在utils添加tab-service.js(通过接口请求，去判断体现谁人tabbar)
  1. let tabData = {
  2.   tabIndex: 0,//底部按钮高亮下标
  3.   tabBar: {
  4.       custom: true,
  5.       color: "#5F5F5F",
  6.       selectedColor: "#07c160",
  7.       backgroundColor: "#F7F7F7",
  8.       list: []
  9.   }
  10. }
  12. // 更新菜单
  13. const updateRole = (that, type) => {
  14. if (type === '0') {
  15.     tabData.tabBar.list=[{
  16.       pagePath: "/pages/index/index",
  17.       iconPath: "/static/images/home.png",
  18.       selectedIconPath: "/static/images/home@selected.png",
  19.       text: "首页"
  20.     },
  21.     {
  22.       pagePath: "/pages/adoptProduct/adoptProduct",
  23.       iconPath: "/static/images/adopt.png",
  24.       selectedIconPath: "/static/images/adopt@selected.png",
  25.       text: "认养"
  26.     },
  27.     {
  28.       pagePath: "/pages/supermarket/supermarket",
  29.       iconPath: "/static/images/supermarket.png",
  30.       selectedIconPath: "/static/images/supermarket@selected.png",
  31.       text: "农副超市"
  32.     },     
  33.     {
  34.       pagePath: "/pages/ucenter/index/index",
  35.       iconPath: "/static/images/my.png",
  36.       selectedIconPath: "/static/images/my@selected.png",
  37.       text: "我的"
  38.     }]
  39.   }else if (type === '1'){
  40.     tabData.tabBar.list= [{
  41.       pagePath: "/pages/index/index",
  42.       iconPath: "/static/images/home.png",
  43.       selectedIconPath: "/static/images/home@selected.png",
  44.       text: "首页"
  45.     },
  46.     {
  47.       pagePath: "/pages/supermarket/supermarket",
  48.       iconPath: "/static/images/supermarket.png",
  49.       selectedIconPath: "/static/images/supermarket@selected.png",
  50.       text: "农副超市"
  51.     },     
  52.     {
  53.       pagePath: "/pages/ucenter/index/index",
  54.       iconPath: "/static/images/my.png",
  55.       selectedIconPath: "/static/images/my@selected.png",
  56.       text: "我的"
  57.     }]
  58.   }
  59.   updateTab(that);
  60. }
  62. // 更新底部高亮
  63. const updateIndex = (that, index) => {
  64.   tabData.tabIndex = index;
  65.   updateTab(that);
  66. }
  68. // 更新Tab状态
  69. const updateTab = (that) => {
  70.   if (typeof that.getTabBar === 'function' && that.getTabBar()) {
  71.       that.getTabBar().setData(tabData);
  72.   }
  73. }
  75. // 将可调用的方法抛出让外面调用
  76. module.exports = {
  77.   updateRole, updateTab, updateIndex,tabBar:tabData.tabBar.list
  78. }
复制代码
4.在tabbar对应界面添加
  1. tabService.updateRole(this,'0') // 显示所有tabbar4个
  2. tabService.updateRole(this,'1') // 显示tabbar中的3个
  3. tabService.updateIndex(this, 0)  // tabbar高亮
复制代码
首页中的index.js
  1. onShow(){
  2.     this.chooseMenu()
  3.     tabService.updateIndex(this, 0)  // tabbar高亮
  4.   }
  5. chooseMenu(){
  6.         util.request(api.chooseMenu, {
  7.         }, 'GET').then(res => {
  8.           if (res.errno === 0) {
  9.             if(res.data == 1 ) {
  10.               tabService.updateRole(this,'1')
  11.             }else {
  12.               tabService.updateRole(this,'0')
  13.             }
  14.           }
  15.           else{
  16.             util.showErrorToast(res.errmsg);
  17.           }
  18.         })
  19.       }
复制代码
我的页面中的index.js
  1. onShow(){
  2.     this.chooseMenu()
  3.     tabService.updateIndex(this, 0)  // tabbar高亮
  4.   }
  5. chooseMenu(){
  6.         util.request(api.chooseMenu, {
  7.         }, 'GET').then(res => {
  8.           if (res.errno === 0) {
  9.             if(res.data == 1 ) {
  10.                tabService.updateRole(this,'1')
  11.                tabService.updateIndex(this, 2)  //由于tabService.updateRole(this,'1')为1，所有少一个认养tabbar，所有updateIndex应传2高亮
  12.             }else {
  13.                tabService.updateRole(this,'0')
  14.                tabService.updateIndex(this, 3)
  15.             }
  16.           }
  17.           else{
  18.             util.showErrorToast(res.errmsg);
  19.           }
  20.         })
  21.       }
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4