app.json
文件配置信息
"tabBar": {
"color":"#000",//基础底部图标颜色
"selectedColor": "#f4ea2a",//选中图标颜色
"borderStyle": "white",//底部颜色
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home.png",//未选中图标
"selectedIconPath": "images/homei.png"//选中图标
},
{
"pagePath": "pages/INcircle/INcircle",
"text": "交流圈",
"iconPath": "images/circle.png",
"selectedIconPath": "images/circlei.png"
},
{
"pagePath": "pages/INTimetable/INTimetable",
"text": "课表",
"iconPath": "images/Timetable.png",
"selectedIconPath": "images/Timetablei.png"
},
{
"pagePath": "pages/INMy/INMy",
"text": "我的",
"iconPath": "images/My.png",
"selectedIconPath": "images/Myi.png"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
}
小红点配置:
不带文字 wx.showTabBar(OBJECT)
wx.hideTabBar(OBJECT)
带文字:wx.setTabBarBadge(OBJECT)
wx.removeTabBarBadge(OBJECT)
具体看微信官方文档:微信底部栏角标小红点配置
闪烁角标小红点配置index.js
dome:
Page({
data: {
countDownNum: 3,
i: 123,
},
//设置定时器角标显示闪烁
countDown: function () {
var that = this,
countDownNum = that.data.countDownNum
if (that.data.i != null) {
that.setData({
timer: setInterval(function () {
countDownNum--;
console.log(countDownNum)
//当countDownNum为偶数时显示红点
//当countDownNum为奇数时隐藏红点
if (countDownNum % 2 == 0) {
wx.setTabBarBadge({
index: 2,//index是让tabbar的第几个图标闪起来(从0开始的),我现在是让第二个图片的红点闪
text:"12"
})
} else {
wx.removeTabBarBadge({
index: 2,//index是让tabbar的第几个图标闪起来(从0开始的),我现在是让第二个图片的红点闪
text:"12"
})
}
if (countDownNum == 0) {
clearInterval(that.data.timer);//让计时器取消定时
}
}, 1000)//这里的单位是毫秒,是计时器在倒数时的间隔时间,如果想把闪烁速度调快,把这里的数值调低
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//方法调用
this.countDown();
}
})