2020年6月23日

微信tabBar右上角数字效果(附代码)


微信tabBar右上角数字效果(附代码),其实是微信自带有wx.setTabBarBadge函数,只需要按方法添加到 page.js的 onReady区间即可。

 


Page({
onShareAppMessage: function (res) {
return {
title: 'ECharts 可以在微信小程序中使用啦!',
path: '/pages/index/index',
success: function () { },
fail: function () { }
}
},
data: {
ec: {
onInit: initChart
}
},

onReady() {
setTimeout(function () {
// 获取 chart 实例的方式
// console.log(chart)
}, 2000);

//这里我们只介绍我们用到的方法

wx.setTabBarBadge({//这个方法的意思是,为小程序某一项的tabbar右上角添加文本
  index: 1,   //代表哪个tabbar(从0开始)
  text: '1'   //显示的内容
})
wx.setTabBarBadge({//这个方法的意思是,为小程序某一项的tabbar右上角添加文本
  index: 2,   //代表哪个tabbar(从0开始)
  text: '1'   //显示的内容
})

// wx.removeTabBarBadge({//这个方法为移除当前tabbar右上角的文本
//         index: 2,     //代表哪个tabbar(从0开始)
//      })
}
});

本文由专业的WEB前端外包公司-切图网原创,转载请保留版权( WEB前端开发外包www.qietu.com切图网始于2007年,提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询!热线:027-81777732、13343477732