微信小程序自定义tabbar：显示未读数字

柿霖不是林

预览小程序时根目录请选择dist
由于本人实在受不了小程序的开发工具，so，编码环境是Atom，使用了gulp修改wxmlwxss的文件后缀






const app = getApp()

// step1: 引入tabbar的js文件
//        用来合并config 添加tabbar所需要的一些事件之类的东西
const mergeTabbar = require('../lib/tabbar')

// step2: 设置tabbar所需的数据
const tabbarConfig = Object.assign({}, app.tabbar)

const initConfig = {
  data: {
    tabbarConfig
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: 'Page1'
    })

    let self = this
    let {
      tabbarConfig
    } = self.data
    tabbarConfig.cursor = 'page1'
    self.setData({
      tabbarConfig
    })
    self.intervalKey = setInterval(() => {
      let {
        tabbarConfig
      } = self.data

      // 这一步是为了更新当前页面的data
      tabbarConfig.list[1].hint = Math.min(99, tabbarConfig.list[1].hint + 1)
      self.setData({
        tabbarConfig
      })

      // 这一步为了更新全局的tabbar数据 避免切换到其他页面后 数据没有变化
      app.tabbar.list[1].hint = Math.min(99, app.tabbar.list[1].hint + 1)
    }, 1000)
  },
  onUnload () {
    clearInterval(this.intervalKey)
  }
}

// step3: 将之前传入Page中的json对象先传入 tabbar中
//        tabbar会接入一些自己的事件供tabbar组件使用
const config = mergeTabbar(initConfig)

// step4: 将合并后的config传入Page
//        well done-.-
Page(config)

游客，如果您要查看本帖隐藏内容请回复

Ywenli

感谢分享

xiaocx

666666666666666666666

jack56846

我有流量，寻求个人游戏开发者合作，有意者联系微信号jim20180688