原生小程序使用iview-weapp自定义tabBar

fairy_404

已于 2022-07-29 10:41:53 修改

阅读量606

点赞数

分类专栏：微信小程序 JavaScript

于 2022-07-28 16:24:03 首次发布

本文链接：https://blog.csdn.net/LY__lyxka/article/details/126037569

版权

微信小程序 tabBar 自定义组件切换导航 onShow方法

关键词由CSDN通过智能技术生成

JavaScript 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

微信小程序

3 篇文章 0 订阅

订阅专栏

使用流程（根据官网说明）

1.配置信息

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

示例：

"tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/index/index",
        "text": "信息"
      },
      {
        "pagePath": "pages/login/index",
        "text": "登录"
      }
    ]
  },

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件（组件形式）

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。另外，自定义组件新增 getTabBar 接口，可获取当前页面下的自定义 tabBar 组件实例

示例：

custom-tab-bar/index.js

// custom-tab-bar/index.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    current: 'home',
    urlObj: {
      login: '/pages/login/index',
      index: '/pages/index/index',
      logs: '/pages/logs/logs',
      home: '/pages/home/index',
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * 自定义tabBar
     * @param {*} param0 
     */
    handleChange({
      detail
    }) {
      let url = this.data.urlObj[detail.key];
      wx.switchTab({url})
      this.setData({
        current: detail.key
      });
    }

  }
})

custom-tab-bar/index.wxss

/* custom-tab-bar/index.wxss */
.is-ios{
  height: env(safe-area-inset-bottom);
  background-color: #ffffff;
}

custom-tab-bar/index.wxml

<!--custom-tab-bar/index.wxml-->
<i-tab-bar current="{{ current }}" bindchange="handleChange">
    <i-tab-bar-item key="home" icon="homepage" current-icon="homepage_fill" title="Home"></i-tab-bar-item>
    <i-tab-bar-item key="index" icon="group" current-icon="group_fill" title="index"></i-tab-bar-item>
    <i-tab-bar-item key="logs" icon="remind" current-icon="remind_fill" count="3" title="logs"></i-tab-bar-item>
    <i-tab-bar-item key="login" icon="mine" current-icon="mine_fill" dot title="login"></i-tab-bar-item>
  </i-tab-bar>
  <view class="is-ios"></view>

custom-tab-bar/index.json

{
  "component": true,
  "usingComponents": {
    "i-tab-bar": "../iwiew/weapp/dist/tab-bar/index",
    "i-tab-bar-item": "../iwiew/weapp/dist/tab-bar-item/index"
  }
}

4.在四个tabBar页面的onShow方法中新增

//home/index.js
 this.getTabBar().setData({
   current: 'home'
 })
//my/index.js
 this.getTabBar().setData({
  current: 'my'
})
//logs/index.js
 this.getTabBar().setData({
  current: 'losg'
})
//index/index.js
 this.getTabBar().setData({
  current: 'index'
})