小程序自定义tabbar,中间凸起

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

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

csharp 复制代码
<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中添加点击事件

csharp 复制代码
  /* 自定义底部按钮切换 */
  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数据结构

csharp 复制代码
  "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、在对应的页面中执行点击事件

csharp 复制代码
  app.getCurrentTabbar(index,this);
  /* index:tabbar对应的index */

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

相关推荐
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Goona_12 小时前
PyQt批量年龄计算工具:从身份证到指定日期的周岁处理
python·小程序·交互·pyqt
知识分享小能手14 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
全栈小514 小时前
【小程序】微信开发者工具上调用api接口可以,到了线上调用发现提示wx.request调用报错,原来是https协议问题
网络协议·小程序·https
爱隐身的官人16 小时前
微信小程序反编译教程
微信小程序·小程序·小程序反编译
G佳伟17 小时前
你好,因用户投诉并经平台审核,发现账号已发布的服务所选类目与小程序运营内容不符合,亲测有效
小程序
计算机徐师兄18 小时前
Java基于SpringBoot的智慧校园管理系统小程序【附源码、文档说明】
java·微信小程序·小程序·智慧校园管理系统小程序·java智慧校园管理系统小程序·智慧校园管理系统微信小程序·智慧校园管理微信小程序
毕设源码-赖学姐18 小时前
【开题答辩全过程】以 宝贝回家网微信小程序为例,包含答辩的问题和答案
微信小程序·小程序
说私域21 小时前
开源AI智能名片赋能下微商商业模式的创新路径研究——以链动2+1模式与S2B2C商城小程序融合为例
人工智能·小程序·开源
pearbing1 天前
B站排名优化:知识、娱乐、生活类内容的差异化实操策略
人工智能·微信·小程序·生活·娱乐