當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序使用vant-weapp自定义tabbar已经设置小红点--官方设置示例

發(fā)布時間：2024/5/14 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序使用vant-weapp自定义tabbar已经设置小红点--官方设置示例小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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>

生命周期函數(shù)--監(jiān)聽頁面顯示在每個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

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

總結

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

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

上一篇：模仿百度搜索：上下翻动、带有时间
下一篇：一篇讲组播MAC和各类IP地址的文章