Yang

Appearance

自定义 tabBar 官方文档 ​

注意

在代码根目录下添加入口文件

ts
// src/custom-tab-bar/custom-tab-bar.ts
Component({

  /**
   * 页面的初始数据
   */
  data: {
    show: 1,
    active: 0,
    color: '#7A7E83',
    iconColor: '#3cc51f',
    list: [
      {
        text: '工具',
        icon: 'apps-o',
        url: '/pages/tool/tool'
      },
      {
        text: '创意',
        icon: 'brush-o',
        url: '/pages/idea/idea'
      }
    ]
  },
  attached() {
  },
  methods: {
    /**
     * 需要tab 初始化
     * onShow() { this.getTabBar().init() }
     */
    init() {
      const pages = getCurrentPages()
      const page = pages[pages.length - 1]
      this.setData({
        active: this.data.list.findIndex(item => item.url.includes(page.route))
      })
    },
    onChange(event: any) {
      this.setData({ active: event.detail })
      wx.switchTab({ url: this.data.list[event.detail].url })
    }
  }
})
// src/custom-tab-bar/custom-tab-bar.ts
Component({

  /**
   * 页面的初始数据
   */
  data: {
    show: 1,
    active: 0,
    color: '#7A7E83',
    iconColor: '#3cc51f',
    list: [
      {
        text: '工具',
        icon: 'apps-o',
        url: '/pages/tool/tool'
      },
      {
        text: '创意',
        icon: 'brush-o',
        url: '/pages/idea/idea'
      }
    ]
  },
  attached() {
  },
  methods: {
    /**
     * 需要tab 初始化
     * onShow() { this.getTabBar().init() }
     */
    init() {
      const pages = getCurrentPages()
      const page = pages[pages.length - 1]
      this.setData({
        active: this.data.list.findIndex(item => item.url.includes(page.route))
      })
    },
    onChange(event: any) {
      this.setData({ active: event.detail })
      wx.switchTab({ url: this.data.list[event.detail].url })
    }
  }
})