1、vant-weapp組件版

1.首先在根目錄(pages同級目錄)建立?custom-tab-bar?文件夾? 包含?index.js??index.json?index.wxml

Component({data: {// 選中的 tab active: 0,// 菜單列表list: [{"url": "/pages/index/index",//地址"icon": "wap-home-o",//圖標"info": '',//小紅點"text": "首頁"},{"url": "/pages/news/index","icon": "chat-o","info": '3',"text": "消息"},{"url": "/pages/mine/index","icon": "user-o","info": '',"text": "我的"}]},methods: {onChange(e) {console.log(e, 'e')this.setData({active: e.detail});wx.switchTab({url: this.data.list[e.detail].url});},init() {const page = getCurrentPages().pop();this.setData({active: this.data.list.findIndex(item => item.url === `/${page.route}`)});}} });// console.log('首頁') // this.getTabBar().init();

index.json文件

{"component": true,"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index","van-icon": "@vant/weapp/icon/index"} }

index.wxml文件

<van-tabbar active="{{ active }}" bind:change="onChange" class="tabber"><van-tabbar-item wx:for="{{ list }}" info="{{item.info}}" wx:key="index" icon="{{ item.icon }}">{{item.text}}</van-tabbar-item> </van-tabbar> <!-- <van-tabbar-item data-path="/pages/index/index"><imageslot="icon"src="/images/home.png"mode="aspectFit"style="width: 36px; height: 24px;"/><imageslot="icon-active"src="/images/home_h.png"mode="aspectFit"style="width: 36px; height: 24px;"/>首頁</van-tabbar-item><van-tabbar-item data-path="/pages/news/index" info="3"><imageslot="icon"src="/images/message.png"mode="aspectFit"style="width: 36px; height: 24px;"/><imageslot="icon-active"src="/images/message_h.png"mode="aspectFit"style="width: 36px; height: 24px;"/>消息</van-tabbar-item><van-tabbar-item data-path="/pages/mine/index"><imageslot="icon"src="/images/mine.png"mode="aspectFit"style="width: 36px; height: 24px;"/><imageslot="icon-active"src="/images/mine_h.png"mode="aspectFit"style="width: 36px; height: 24px;"/>我的</van-tabbar-item> </van-tabbar> -->

生命周期函數--監聽頁面顯示 在每個tabbar頁面onshow 調用即可;

onShow: function () { console.log('個人中心')；this.getTabBar().init(); },

?app.json文件

{"pages": ["pages/index/index","pages/login/client",],"permission": {"scope.userLocation": {"desc": "你的位置信息將用于小程序位置接口的效果展示"}},"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "","navigationBarTextStyle": "black","navigationStyle": "custom","enablePullDownRefresh": true},"usingComponents": {},"tabBar": {"custom": true,"position": "bottom","borderStyle": "white","color": "#666666","selectedColor": "#2861F0","list": [{"pagePath": "pages/index/index","text": "首頁","iconPath": "/images/home.png","selectedIconPath": "/images/home_h.png"},{"pagePath": "pages/news/index","text": "消息","iconPath": "/images/message.png","selectedIconPath": "/images/message_h.png"},{"pagePath": "pages/mine/index","text": "我的","iconPath": "/images/mine.png","selectedIconPath": "/images/mine_h.png"}]},"sitemapLocation": "sitemap.json" }

2、官方示例版

微信官方提供的原生設置tabbar上設置小紅點api

代碼片段：https://developers.weixin.qq.com/s/ZJoXe3m57mmN

代碼片段2：https://developers.weixin.qq.com/s/dsofN3mW7vmz

---

設置在小程序頁面的?onLoad或者onShow

顯示數字或文字 wx.setTabBarBadge({index: 4,text: ‘new’, //可改 或者數字});移除文字 wx.removeTabBarBadge({index: 4,});//加紅點 wx.showTabBarRedDot({ index: 4,});移除紅點 wx.hideTabBarRedDot({ index: 4,});

?

總結

以上是生活随笔為你收集整理的微信小程序使用vant-weapp自定义tabbar已经设置小红点--官方设置示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。