当前位置: 首页 > Web前端 > HTML

使用colorui自定义微信小程序中的tabbar按钮

时间:2023-03-28 00:36:55 HTML

废话不多说,直接上代码,"navigationBarTextStyle":"white"},"usingComponents":{},"tabBar":{"custom":true,"color":"#aaa","selectedColor":"#39b54a","borderStyle":"black","backgroundColor":"#ffffff","list":[{"pagePath":"pages/information/information","text":"findgroup"},{"pagePath":"pages/person/person","text":"找人"},{"pagePath":"pages/release/release","text":"Release"},{"pagePath":"pages/source/source","text":"查找资源"},{"pagePath":"pages/my/my","text":"My"}]},"sitemapLocation":"sitemap.json","cloudfunctionRoot":"./cloudfunction/"}创建一个名为custom-tab-barindex.jsComponent({properties:{},data:{selected:0,tabList:[{"pagePath":"pages/information/information","text":"找群",},{"pagePath":"pages/person/person","text":"找人",},{"pagePath":"pages/release/release","text":"Release",},{"pagePath":"pages/source/source","text":"查找资源",},{"pagePath":"pages/my/my","text":"我的"}]},methods:{switchTab(e){console.log(this.data)letkey=Number(e.currentTarget.dataset。指数);让tabList=this.data.tabList;让选择=键;this.setData({selected:key})wx.switchTab({url:`/${tabList[key].pagePath}`,})}}})index.wxml找群找人发布寻找资源我的index.wxss@import"/colorui.wxss";@import"/icon.wxss";.tabbar{背景色:#ffffff;}.bg-cyan{background-color:#cce6ff;}.active{color:blue;}.default{color:rgb(51,24,24);}任意页面的方法Add:tabBar(){if(typeofthis.getTabBar==='function'&&this.getTabBar()){this.getTabBar().setData({selected:4,})}},可以实现如下效果: