电子商务网站建设实践报告吴江设计网站公司

微信小程序自带tabbar，但无法实现中间按钮凸起样式和功能，因此按照设计重新自定义一个tabbar

1、创建tabbar文件，与pages同级创建一个文件夹，custom-tab-bar,里面按照设计图将底部tabbar样式编写

<view class="tab-bar"><view class="tab-bar-border"></view><block wx:for="{{list}}" wx:key="index"><view wx:if="{{item.isSpecial}}" class="tab-bar-item" data-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial || false }}" data-index="{{index}}" bindtap="switchTab"><view class="special-image"><image class="special-image-pic" mode="widthFix" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image></view><view style="color: {{selected === index ? selectedColor : color}}" class="special-text tab-text">{{item.text}}</view></view><view wx:else class="tab-bar-item" data-name="{{item.text}}" data-path="{{item.pagePath}}" data-click="{{ item.isSpecial }}" data-index="{{index}}" bindtap="switchTab"><image class="item-image" mode="widthFix" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image><view class="tab-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view><view class="num" wx:if="{{item.text == '消息' && message_num != 0}}">{{message_num}}</view></view></block>
</view>

2、在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 */

如需源码，请点击下载源码，或点击顶部下载按钮