### [小程序如何自定义tabbar组件，实现底部tab切换](https://www.prosaas.cn/article/16389)

**Published:** 2021-08-12T02:42:47

**Author:** 5201314

**Excerpt:** 本篇文章给大家介绍一下在小程序页面中自定义tabbar组件，实现底部tab切换的方法。近日需求，设计稿如图要实…

本篇文章给大家介绍一下在小程序页面中自定义tabbar组件，实现底部tab切换的方法。

![](https://img.php.cn/upload/article/000/000/024/61148a6462448766.jpg)

近日需求，设计稿如图

![](https://img.php.cn/upload/image/559/832/987/1628735882180973.png)

要实现一个特殊的底部导航栏，采用官方提供的自定义tabbar组件，添加底部tab页面，切换图片闪屏。【相关学习推荐：小程序开发教程】

> 解决采用swiper轮播图+自定义组件

## 1.编写自定义组件jtab-bar

### wxml文件

<view class="jtab-bar">
  <view class="jtab-bar-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="switchTab">
    <image wx:if="{{item.type === 'image'}}" class="jcover-img-bigicon" 
      src="{{selected === index ? item.iconSelect : item.icon}}"></image>
    <view class="jtab-text" wx:else style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

### js文件

Component({
  data: {
    selected: 0,
    color: "#999999",
    selectedColor: "#032F82",
    list: \[
      {
      type: 'text',
      text: "首页"
    }, 
    {
      type: 'image',
      icon: '../../image/icon\_map.png',
      iconSelect: '../../image/icon\_map\_select.png',
      text: ''
    }, 
    {
      type: 'text',
      text: "我的"
    }\]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      this.setData({selected: data.index})
      this.triggerEvent("setTab", data.index)
    }
  }
})

### wxss文件

.jtab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: white;
  display: flex;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1);
}


.jtab-bar-item {
  text-align: center;
  flex: 1;
  height: 100rpx;
}

.jtab-bar-item .jtab-text {
  height: 100rpx;
  line-height: 100rpx;
}


.jcover-img-bigicon {
  position: fixed;
  bottom: 0rpx;
  width: 210rpx;
  height: 128rpx;
  padding-bottom: env(safe-area-inset-bottom);
  margin: 0 auto;
  right: 0;
  left: 0;
}

使用的两张图片：

![](https://img.php.cn/upload/image/591/440/763/1628735889861424.png)

![](https://img.php.cn/upload/image/513/564/671/1628735894230389.png)

## 2.页面中使用

### wxml文件

<view>
  <swiper class="jswipper-block" current="{{currentTab}}"  duration="{{100}}">
        <block wx:for="{{background}}" wx:key="\*this">
          <swiper-item catchtouchmove="swipperStop">
            <view class="swiper-item {{item}}">{{item}}</view>
          </swiper-item>
        </block>
      </swiper>
  <jtabbar bindsetTab="setTabbar"/>
</view>

> 这里使用catchtouchmove="swipperStop" swipperStop是个空函数来处理，禁止手动滑动

### wxss文件

.jswipper-block {
  height: calc(100vh - 170rpx);
  background: #F7F8F9;
}

### js文件

/\*\*
   \* 页面的初始数据
   \*/
  data: {
    background: \['demo-text-1', 'demo-text-2', 'demo-text-3'\],
    currentTab: 0
  },

  setTabbar({detail}) {
    this.setData({currentTab: detail})
  },

  // 轮播图 禁止手动滑动 catchtouchmove="swipperStop"
  swipperStop(){
  },

暂完。

更多编程相关知识，请访问：编程视频！！

以上就是小程序如何自定义tabbar组件，实现底部tab切换的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** JS

**Categories:** 后端开发

---