小程序如何实现自定义tabBar

智慧大石 2021/7/25 20:05:47

背景由于微信默认的tabbar是官方组件,有最高的优先级,因此我们自己组件的遮罩层无法覆盖他们。为了解决这个问题,我们可以使用微信提供的自定义tabBar功能。官方文档:developers.weixin.qq.com/miniprogram…实现效果:实现方式在项目根目录下创建custom-tab-bar组件,…

背景

由于微信默认的tabbar是官方组件,有最高的优先级,因此我们自己组件的遮罩层无法覆盖他们。为了解决这个问题,我们可以使用微信提供的自定义tabBar功能。

官方文档:developers.weixin.qq.com/miniprogram…

实现效果:

http://img1.sycdn.imooc.com/60fd45720001468e03870059.jpg

实现方式

  1. 在项目根目录下创建custom-tab-bar组件,文件名为index,如图


http://img4.sycdn.imooc.com/60fd45730001efe902410122.jpg

  1. 在app.json中把tabBar设置为自定义,这里的list必须要定义,否者会报错


http://img1.sycdn.imooc.com/60fd458d00012d6204930459.jpg

  1. 编写tabbar代码


wxml:

<view class="bar">

  <view class="bar__item {{ index == selected ? 'bar__active' : '' }}" wx:for="{{list}}" wx:key="index" bind:tap="handleClick" data-index="{{ index }}" data-path="{{ item.pagePath }}">

    <image class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{ index == selected ? item.selectedIconPath : item.iconPath }}" mode="aspectFit" class="bar__img" />

    <view class="bar__text">{{ item.text }}</view>

  </view>

</view>



js:

Component({

  data: {

    selected: 0,

    list: [

      {

        "iconPath": "/static/tabbar/index.png",

        "selectedIconPath": "/static/tabbar/index2.png",

        "pagePath": "/pages/index/index",

        "text": "首页"

      },

      {

        "iconPath": "/static/tabbar/activity.png",

        "selectedIconPath": "/static/tabbar/activity2.png",

        "pagePath": "/pages/find/find",

        "text": "活动"

      },

      {

        "iconPath": "/static/tabbar/mall.png",

        "selectedIconPath": "/static/tabbar/mall2.png",

        "pagePath": "/pages/pageConfig/configIndex",

        "text": "商城"

      },

      {

        "iconPath": "/static/tabbar/my.png",

        "selectedIconPath": "/static/tabbar/my2.png",

        "pagePath": "/pages/my/my",

        "text": "我的"

      }

    ]

  },


  methods: {

    handleClick(e) {

      let path = e.currentTarget.dataset.path;

      let index = e.currentTarget.dataset.index;

      wx.switchTab({ url: path })

      this.setData({ selected: index })

    }

  }

});



wxss 特别说明:自定义的tabbar层级默认为9999(非官方说明,自己测出的结果),我这里使用的less,会编译为wxss。


.bar {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 50px;

  display: flex;

  justify-content: space-around;

  background-color: #fff;

  padding-bottom: env(safe-area-inset-bottom);

  &__item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

  }


  &__img {

    width: 24px;

    height: 24px;

    margin-bottom: 2px;

  }

  &__text {

    font-size: 10px;

  }


  &__active {

    .bar__text {

      color: #487271;

    }

  }

}


json:

{

  "component": true,

  "usingComponents": {}

}


完成上面的步骤,tarbar组件就写完了,接下来是使用了

使用自定义tabBar

这个组件不需要手动注册,在list中定义的页面会自动加载这个组件。但是需要通过下面的方法手动指定高亮的选项:

// 建议在onShow方法中调用,selected 值为索引值

onShow() {

  this.getTabBar().setData({ selected: 0 })

}

处理padding值

由于使用了自定义tabbar,因此需要对使用tababr的页面设置下内边距,以防止内容被覆盖。可以在app.wxss中定义一个全局样式,然后在对应的页面添加这个类名即可。


.global__fix_tabbar {

  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));

}

最终效果

我们的小程序使用vant-weapp组件库,对于popup组件,设置更高的层级,就可以覆盖tabbar了

<!-- z-index="99999" -->

<van-popup

  show="{{ showPhone }}"

  round

  custom-class="custom"

  z-index="99999"

  position="bottom"

  bind:click-overlay="onClosePhone"

  catchtouchmove="ture"

>

 </van-popup>

   

效果如图:

http://img2.sycdn.imooc.com/60fd46670001cc7e04080681.jpg

作者:wmui
链接:https://juejin.cn/post/6987958137743474725
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[小程序如何实现自定义tabBar]http://www.zyiz.net/tech/detail-207895.html

上一篇:微信小程序如何在父组件中修改子组件的样式

下一篇:小程序自定义标题栏写法(适配各种大小刘海屏)

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程