微信小程序自定义tabbar

2022-04-04 21:04:58 阅读：263 来源： 互联网

标签：index bar tab 自定义微信 custom tabbar

来自：https://blog.csdn.net/qq_43379916/article/details/120206962

1. app.json

// 需要先定义tabBar页面
// “pages” 配置里面也不要忘了
"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/goods/index"
      }
    ]
 }

2. app.js

// app.js
App({
  //定义全局setTabbar方法
  $setTabbar(that,currentName){
      if(typeof that.getTabBar == 'function' && that.getTabBar()){
          let tabbar = that.getTabBar();
        console.log(tabbar);
        tabbar.setData({
          currentName
        })
    }
  }
})

3. index.wxml，goods.wxmll

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  onShow(){
    /*
      返回当前页面的 custom-tab-bar 的组件实例，详见【自定义 tabBar】
      注意：自定义tabbar的名称必须为：custom-tab-bar,而且路径必须在根目录下
      不然getTabBar方法找不到
    */
   getApp().$setTabbar(this,'index');
   //'index' 根据页面来 在下面的tabbarList的name属性需要用到
  }
})

4. custom-tab-bar 组件必须在根目录，custom-tab-bar/index.wxml

5. custom-tab-bar/index.js

// ps：资源就自定义了哈

//声明这是一个组件
Component({
    data:{
      //组件私有数据
      currentName:'index',
      //准备好自定义tabbar资源
      //自定义的tabBar 需要在app.json配置中存在
      tabbarList:[{
        "pagePath": "/pages/index/index", //使用switchTab跳转时需要在page前面加上 / 斜杠
        "text": "index",
        "iconPath": "../assets/tabbar/1-1.png",
        "selectedIconPath": "../assets/tabbar/1.png",
        "style":'',
        "name":'index'
      },
      {
        "pagePath": "/pages/goods/index",
        "text": "goods",
        "iconPath": "../assets/tabbar/2-2.png",
        "selectedIconPath": "../assets/tabbar/2.png",
        "style":'',
        "name":'goods'
      }]
    },
    lifetimes:{
      //组件生命周期
      attached(){
        //在组件实列进入页面节点树时执行
        console.log('嘿，我被执行了');
      }
    },
    methods:{
      //组件定义的方法（浓浓的既视感）
      swicthTabbar(e){
        let { index} = e.currentTarget.dataset;
        wx.switchTab({
          url: this.data.tabbarList[index].pagePath,
        })
      }
    }
})

6. custom-tab-bar/index.wxml

<!-- 自定义tabbar文档介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html -->
<!-- cover-view 是为了防止层级问题，目前原生组件均已支持同层渲染，使用view也是可以的 -->
<!-- ps:文档里面说使用 cover-view，那就用这个实现一下 -->
<!-- 会默认出现到最底部,覆盖在原生组件之上的文本视图 -->
<cover-view class="custom-tabbar">
  <cover-view wx:for="{{tabbarList}}" wx:key="index" class="tabbar-item" data-index="{{index}}" bindtap="swicthTabbar">
    <cover-image src="{{currentName == item.name ? item.selectedIconPath : item.iconPath}}" class="tabbar-icon" style="{{item.style}}"></cover-image>
    <cover-view class="{{currentName ==  item.name ? 'text-active' : 'tabbar-text'}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

7. custom-tab-bar/index.wxss

.custom-tabbar{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  
  background-color: #fff;
  box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.3); 
  height: 96rpx;
  /*（兼容有安全区域的手机）*/
  padding-bottom: constant(safe-area-inset-bottom);/*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom);/*兼容 IOS>11.2*/

  display: flex;
}
.tabbar-item{
  display: flex;
  justify-content:center;
  align-items: center;
  flex: 1;
  flex-direction: column;
  font-size: 24rpx;
}
.tabbar-icon{
  width: 44rpx;
  height: 44rpx;
}
.tabbar-text{
  color: #9c9c9c;
}
.text-active{
  color: #000;
}

标签：index,bar,tab,自定义,微信,custom,tabbar
来源： https://www.cnblogs.com/jqynr/p/16100373.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序自定义tabbar