微信小程序-自定义tabbar配置及注意事项

1.选中要创建tabbar组件的目录，右键选定新建Componen

2.然后编写wxml代码和wxss样式

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>

  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"  bindtap="switchTab">
  <block wx:if="{{index === 1}}">
    <cover-view class="pub">{{item.text}}</cover-view>
  </block>

  <block wx:else>
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </block>
  </cover-view>

</cover-view>

这里注意：

<cover-view></cover-view>

<cover-image></cover-image>

这两个组件都表示最上层显示，避免被其他组件覆盖。

 

<block></block>这个组件只是将其他组件框住，并不会被页面渲染。

查看代码

 /* component/tabbar/tabbar.wxss */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 27px;
  height: 27px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

.pub{
  background-color:dodgerblue ;
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

查看代码

 // component/tabbar/tabbar.js
var app = getApp();

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    selected: {
        // 默认选中list[0]页面
      type:Number,
      value:0
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    color: "#7A7E83",  //默认颜色
    selectedColor: "#FF3030",  // 被选中后的颜色

    list: [{
      pagePath: "/pages/index/index",  // 页面路径
      iconPath: "../../static/images/tab/icon_component.png",  // 图标路径
      selectedIconPath: "../../static/images/tab/icon_component_HL.png",  // 被选中后的图片路径
      text: "首页"
    },
    {
      text: "发布"
    },
    {
      pagePath: "/pages/home/home",
      iconPath: "../../static/images/tab/icon_API.png",
      selectedIconPath: "../../static/images/tab/icon_API_HL.png",
      text: "我的"
    }]
  },
  /**
   * 组件的方法列表
   */
// 前端所需要调用函数，必须得在methods编写
 methods: {
    switchTab(e) {
      var data = e.currentTarget.dataset
      console.log(data);
      var url = data.path;
      if (url) {
        wx.switchTab({
          url: url
        })
      } else {
        if (app.globalData.userInfo) {
          wx.navigateTo({
            url: '/pages/publish/publish',
          })
        } else {
          wx.navigateTo({
            url: '/pages/auth/auth',
          })
        }
      }
    }
  }
});

注意:

 wx.switchTab():  只能跳转到 tabbar页面。

wx.navigateTo():   只能跳转到 非tabbar页面。

 

3.其他页面，想要作为tabbar页面，需要在自己的json文件中配置，在wxml中调用。

 

自定义一个组件：并且写上路径。

{
  "usingComponents": {
    "tabbar":"/component/tabbar/tabbar"
  }
}

 

在wxml中调用一下这个组件，并且还可以对selected进行传值，作为list[]中的第几个页面，索引是从0开始的。

注：必须得调用一下自定义编写的组件，不然可能会发生页面无法跳转的尴尬。无论写在最上方或者最下方都可以。

<tabbar selected="{{2}}"></tabbar>

5.需要在全局的app.json中定义：

  "tabBar": {
    "custom": true,
}

6.小提示：

  虽然自定义的tabbar，优先度是高过app.json的。

  但并不代表，app.json中的就代码不执行了。

如果你是按照上述方法，自己定义的tabbar，却还是发生了无法跳转tabbar页面的情况。

那就有可能是你所自定义的微信跳转的方法，与app.json中的tabBar：{list:[]} 的某一项发生了冲突，可以尝试删掉那一段试试。

比如：

  你自定义的跳转方法使用的是wx.navigateTo()到A页面，

  而你却在app.json中的tabBar：{list:[]}中配置了A页面的路径。

  这样就会因为wx.navigateTo()只能跳转到非tabbar页面发生了冲突，从而产生不能跳转的缘故。

  只要将A页面中的那一段字典，全部删掉即可。