福田网站建设罗湖网站建设,如何选择家居网站建设,做网站应该选择怎样的公司,网站制作致谢词微信小程序自带tabbar#xff0c;但无法实现中间按钮凸起样式和功能#xff0c;因此按照设计重新自定义一个tabbar
1、创建tabbar文件#xff0c;与pages同级创建一个文件夹#xff0c;custom-tab-bar,里面按照设计图将底部tabbar样式编写
view classtab-bar但无法实现中间按钮凸起样式和功能因此按照设计重新自定义一个tabbar
1、创建tabbar文件与pages同级创建一个文件夹custom-tab-bar,里面按照设计图将底部tabbar样式编写
view classtab-barview classtab-bar-border/viewblock wx:for{{list}} wx:keyindexview wx:if{{item.isSpecial}} classtab-bar-item data-name{{item.text}} data-path{{item.pagePath}} data-click{{ item.isSpecial || false }} data-index{{index}} bindtapswitchTabview classspecial-imageimage classspecial-image-pic modewidthFix src{{selected index ? item.selectedIconPath : item.iconPath}}/image/viewview stylecolor: {{selected index ? selectedColor : color}} classspecial-text tab-text{{item.text}}/view/viewview wx:else classtab-bar-item data-name{{item.text}} data-path{{item.pagePath}} data-click{{ item.isSpecial }} data-index{{index}} bindtapswitchTabimage classitem-image modewidthFix src{{selected index ? item.selectedIconPath : item.iconPath}}/imageview classtab-text stylecolor: {{selected index ? selectedColor : color}}{{item.text}}/viewview classnum wx:if{{item.text 消息 message_num ! 0}}{{message_num}}/view/view/block
/view2、在app.js中添加点击事件 /* 自定义底部按钮切换 */getCurrentTabbar(selected, that) {if (typeof that.getTabBar function that.getTabBar()) {if (wx.getStorageSync(openid)) {msg_unread().then(res {that.getTabBar().setData({selected: selected,message_num: res.data.data})})} else {that.getTabBar().setData({selected: selected})}}},3、在app.json中修改默认tabbar数据结构 tabBar: {custom: true,list: [{pagePath: pages/index/index,text: 首页},{pagePath: pages/contact/index,text: 通讯录},{pagePath: pages/release/index,text: 发布},{pagePath: pages/news/index,text: 消息},{pagePath: pages/personal/index,text: 我的}]
},4、在对应的页面中执行点击事件 app.getCurrentTabbar(index,this);/* index:tabbar对应的index */如需源码请点击下载源码或点击顶部下载按钮
