小程序-tabBar：显示，隐藏，改变图标，模拟消息提示等

<!--pages/index1/index1.wxml-->
<button bindtap="btnClick1" size="default" type="primary">显示 tabBar 的页面1的右上角的红点</button>
<button bindtap="btnClick2" type="default">隐藏 tabBar 的页面1的右上角的红点</button>

<button bindtap="btnClick3" type="primary">为 tabBar  右上角添加文本</button>
<button bindtap="btnClick4" type="warn">移除 tabBar  右上角的文本</button>

<button bindtap="btnClick5" type="primary">隐藏 tabBar</button>
<button bindtap="btnClick6" type="warn">显示 tabBar</button>

<button bindtap="btnClick7" type="primary">动态改变 tabBar 内容</button>
<button bindtap="btnClick8" type="default">动态改变 tabBar 图标文字颜色</button>

 

 /**
    wx.showTabBarRedDot 显示tabBar 某一项的右上角的红点
    index:0    abBar 的哪一项，从左边算起
    wx.hideTabBarRedDot 显示tabBar 某一项的右上角的红点
    index:0    abBar 的哪一项，从左边算起
   */
btnClick1:function(){
  wx.showTabBarRedDot({
    index: 0,
  })
},
btnClick2:function(){
  wx.hideTabBarRedDot({
    index: 0,
  })
},
/**
 * 
 * wx.setTabBarBadge 为 tabBar 某一项的右上角添加文本
   index  tabBar 的哪一项，从左边算起
   text   显示的文本，超过 4 个字符则显示成 ...
  wx.removeTabBarBadge 移除 tabBar 某一项右上角的文本
  index  tabBar 的哪一项，从左边算起
 */
btnClick3: function(){
  wx.setTabBarBadge({
    index: 0,
    text: '99',
  })
},
btnClick4:function(){
  wx.removeTabBarBadge({
    index: 0,
  })
},
/**
 * wx.showTabBar显示 tabBar
   animation:false   否   是否需要动画效果
   wx.hideTabBar隐藏 tabBar
   animation:false   否   是否需要动画效果
 */
btnClick5: function(){
  wx.hideTabBar({
    animation: true, //是否需要动画效果
  })
},
btnClick6: function(){
  wx.showTabBar({
    animation: true,
  })
},
/**
 * 
  wx.setTabBarItem 动态设置 tabBar 某一项的内容
  index    tabBar 的哪一项，从左边算起
  text   tab 上的按钮文字
  iconPath   图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片
  selectedIconPath   选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效
 */
btnClick7:function(){
  wx.setTabBarItem({
    index: 0,
    text:'改变',
    iconPath:'images/爱心.png',
    selectedIconPath: 'images/爱心1.png'
  })
},
/**
 * 
 wx.setTabBarStyle动态设置 tabBar 的整体样式
  color  tab 上的文字默认颜色，HexColor
  selectedColor  tab 上的文字选中时的颜色，HexColor
  backgroundColor  tab 的背景色，HexColor
  borderStyle    tabBar上边框的颜色， 仅支持 black/white
 */
btnClick8: function (options) {
  wx.setTabBarStyle({
    color: '#FF0000',
    selectedColor: '#FFFF00',
    backgroundColor: '#00FFFF',
    borderStyle: 'white'
  })
},