微信小程序自定义tabbar【中间凸起样式】

这篇具有很好参考价值的文章主要介绍了微信小程序自定义tabbar【中间凸起样式】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序自定义tabBar样式,选中后中间凸起

效果预览

微信小程序自定义tabbar【中间凸起样式】

微信开发文档:自定义tabBar

一、配置信息

  • 在 app.json 中的 tabBar 中指定 custom 字段为 true【允许使用自定义 tabBar】

  • 在所有 tab 页 json 中申明usingComponents 项,或者在 app.json 中全局开启

  • 在 list 中指定自己需要 tab

  • 示例

    "tabBar": {
        "custom": true,
        "color": "#515151",
        "selectedColor": "#DAA520",
        "backgroundColor": "#000000",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页"
            },
            {
                "pagePath": "pages/hospital/hospital",
                "text": "医院"
            },
            {
                "pagePath": "pages/publish/publish",
                "text": "item3"
            },
            {
                "pagePath": "pages/popularization/popularization",
                "text": "科普"
            },
            {
                "pagePath": "pages/me/me",
                "text": "我的"
            }
        ]
    },
    "usingComponents": {},
    

二、添加 tabBar 代码文件

在代码根目录下添加custom-tab-bar文件夹,并在该文件夹下新建 page,文件结构如下

|-- cusotm-tab-bar
​    |-- index.js
​​    |-- index.json
​   ​ |-- index.wxml
​   ​ |-- index.wxss

三、编写 tabBar 代码

  1. wxml 代码

    <!--custom-tab-bar/index.wxml-->
    <view class="tab-bar">
      <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <view  wx:if="item.bulge" class="tab-bar-bulge"></view>
        <image class="image" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
        <!-- <view  wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-view">{{item.text}}</view> -->
        <view  class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
      </view>
    </view>
    
  2. js 代码

    // custom-tab-bar/index.js
    Component({
      data: {
        color: "#515151",
        selectedColor: "#DAA520",
        backgroundColor: "#ffffff",
        list: [
          {
            pagePath: "/pages/index/index",
            text: "首页",
            iconPath: "/images/tabbar/index.png",
            selectedIconPath: "/images/tabbar/index-selected.png"
          },
          {
            pagePath: "/pages/hospital/hospital",
            text: "医院",
            iconPath: "/images/tabbar/hospital.png",
            selectedIconPath: "/images/tabbar/hospital-selected.png"
          },
          {
            pagePath: "/pages/publish/publish",
            bulge:true,
            text: "发布",
            iconPath: "/images/tabbar/dog.png",
            selectedIconPath: "/images/tabbar/dog-selected.png"
          },
          {
            pagePath: "/pages/popularization/popularization",
            text: "科普",
            iconPath: "/images/tabbar/popularization.png",
            selectedIconPath: "/images/tabbar/popularization-selected.png"
          },
          {
            pagePath: "/pages/me/me",
            text: "我的",
            iconPath: "/images/tabbar/me.png",
            selectedIconPath: "/images/tabbar/me-selected.png"
          },
        ]
      },
      attached() {
      },
      methods: {
        switchTab(e) {
          const data = e.currentTarget.dataset
          const url = data.path
          wx.switchTab({url}) 
        }
      }
    })
    
  3. wxss 代码

    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      background: #FFF;
      display: flex;
      line-height: 1.2;
      padding-bottom: env(safe-area-inset-bottom);
      border-top: 1px solid #e6e6e6;
    }
    
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item .image {
      width: 26px;
      height: 26px;
    }
    .bulge {
      background-color: #FFF;
    }
    .bulge .tab-bar-bulge{
      position: absolute;
      z-index: -1;
      width: 64px;
      height: 64px;
      top: -24px;
      border-radius: 50%;
      border-top: 1px solid #e6e6e6;
      background-color: #FFF;
    }
    .bulge .image{
      position: absolute; 
      width: 50px;
      height: 50px;
      top: -16px;
    }
    .bulge .tab-bar-view{
      position: relative;
      bottom: -16px;
      margin-top: 4px;
    }
    
    .tab-bar-item .tab-bar-view {
      font-size: 12px;
      margin-top: 4px;
    }
    
    
  4. json 代码

    {
      "component": true
    }
    

四、配置 tab 页

在每一个 tab 页的onShow函数中写入下面的代码,其中 selected 的值为每个 tab 的索引文章来源地址https://www.toymoban.com/news/detail-496054.html

onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
        this.getTabBar().setData({
            // 首页为 0
            selected: 0
        })
    }
},

获取项目源代码

👇微信公众号【京茶吉鹿】内回复“微信小程序组件”👇

到了这里,关于微信小程序自定义tabbar【中间凸起样式】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

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

    微信小程序自带tabbar,但无法实现中间按钮凸起样式和功能,因此按照设计重新自定义一个tabbar 如需源码,请点击下载源码,或点击顶部下载按钮

    2024年02月08日
    浏览(38)
  • 鸿蒙开发自定义tabbar,带中间凸起按钮

    今天要分享的是开发一个自定义tabbar,因为签了保密协议的缘故,所以本项目还是基于鸿蒙4.0。 先看效果图: 自己做的图标不太美观,大家见谅哈哈哈。 这种带中间凸起的tabbar在项目中非常常见,但是我研究了一下系统的tabbar是不支持这样设置的,所以我们就自己开发一个

    2024年04月17日
    浏览(38)
  • 原生微信小程序自定义tabbar引入Color UI样式

    Color UI 是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值,高度自定义的 Css 组件库。本文介绍了原生微信小程序如何自定义 tabbar 并使用 Color UI 样式 Color UI 的安装请自行参考官方文档,以下步骤以已安装Color UI为前提 重点:配置 tabbar.custom = true 在代码根目录下添加

    2024年02月03日
    浏览(56)
  • uni-app 微信小程序之自定义中间圆形tabbar

    首先在 pages.json 文件中,新建一个 tabbar 页面 此页面主要是写 tabbar的html样式和布局,引用主页面代码,通过 v-if 控制进行展示 index , search , maim , news , me 一级页面 css 样式文件太多了就不贴出来了

    2024年02月03日
    浏览(66)
  • uniapp自定义tabbar(支持中间凸起,角标,动态隐藏tab,全端适用)

    在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,无法通过一套代码来做通用平台的适配。比如说中间按钮凸起,动态隐藏某个tab(不同角色展示不同功能),使用字体图标,数字角标等,这些功能不是所有平台都支持

    2024年02月02日
    浏览(42)
  • uniapp开发小程序-实现中间凸起的 tabbar

    1.首先在 pages.json 文件中进行tabbar的样式和列表配置,代码如下: 2.在components文件中封装一个Tabbar 组件,命名为 TabBar.vue 代码如下: 3.在 mian.js 全局注册组件 4.在页面中使用组件

    2024年02月14日
    浏览(37)
  • 前端Vue自定义tabbar底部tabbar凸起tabbar兼容苹果刘海屏小程序和APP

    前端Vue组件化开发:自定义tabbar组件的设计与实现  兼容苹果刘海屏小程序和APP 摘要: 随着前端开发技术的不断发展,组件化开发成为了提高开发效率和降低维护成本的有效手段。本文将介绍一款基于Vue的前端自定义tabbar组件的设计与实现,该组件具有单独开发、单独维护

    2024年02月11日
    浏览(64)
  • uniapp - [ H5 网页 / App ] 高性能 tabbar 底部菜单凸起效果,原生系统自定义底部菜单不卡顿、切换页面不闪烁、自动缓存页面(底部菜单中间自定义一个图片并悬浮起来)

    网上有很多自定义 tabbar 底部菜单的教程,但终归是组件形式,避免不了切换页面卡顿、闪屏闪烁、各平台不兼容等一系列问题。 本文 基于 uniapp 系统原生 tabbar 底部菜单,植入一个向上凸起的 “图片” 菜单,并支持点击触发事件, 您可以直接复制代码,换个中间凸起的菜

    2024年02月21日
    浏览(55)
  • 微信小程序自定义tabBar

    首页 分类 留言 我的 /components/index-tabbar/index.js Component({ properties: { active: { type: String, value: ‘index’ }, }, methods: { onChange(event) { wx.redirectTo({ url: /pages/${event.detail}/index , }) } } }) 模拟的 tabbar 页面写法如下: /pages/home/index.json { “usingComponents”: { “index-tabbar”: “/components/index-ta

    2024年04月24日
    浏览(66)
  • 微信小程序——自定义底部tabBar

    目录  实现步骤 1、配置信息 2、添加代码文件。  3、在该目录下编写代码即可。 二、在app.json里面添加tabBar配置 三.、在custom-tab-bar添加配置 1. 在custom-tab-bar创建如下目录 2.给index.wxml添加tabBar的结构代码   3. 给index.js 添加数据配置 和 事件方法 4. 给index.wxss 添加样式 四、

    2024年02月16日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包