微信小程序-自定义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页面中的那一段字典，全部删掉即可。

巴特西

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

最新文章

热门文章