How to customize the tabbar component in a mini program to achieve bottom tab switching

This article will introduce to you how to customize the tabbar component in the mini program page to achieve bottom tab switching.

Recent requirements, the design draft is as shown

To implement a special bottom navigation bar, use the official provided Customize the tabbar component, add the bottom tab page, and switch the image splash screen. [Related learning recommendations: 小program development tutorial]

Solution to using swiper carousel chart custom component

1. Write a custom component jtab -bar

wxml file

<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 === &#39;image&#39;}}" 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 file

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 file

.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;
}

Two pictures used:

2. Use

wxml file in the page

<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>

Use catchtouchmove="swipperStop" swipperStop is an empty function. Processing, manual sliding is prohibited

wxss file

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

js file

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

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

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

is temporarily completed.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to customize the tabbar component in a mini program to achieve bottom tab switching. For more information, please follow other related articles on the PHP Chinese website!