Recent demand, design draft as shown

To implement a special bottom navigation bar, use the official custom Tabbar component to add a bottom TAB page and toggle the image splash screen.

Swiper swiper diagram and custom components are used

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 === '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>
Copy the code

Js file

Component({ data: { selected: 0, color: "#999999", selectedColor: "#032F82", list: [ { type: 'text', text: "Home page"}, {type: 'image, icon: ".. /.. / images/icon_map. PNG', iconSelect: ".. /.. / images/icon_map_select. PNG ', the text: '}, {type: 'the text, the text: "I"}]}, attached () {}, the methods: { switchTab(e) { const data = e.currentTarget.dataset this.setData({selected: data.index}) this.triggerEvent("setTab", data.index) } } })Copy the code

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; }Copy the code

Two images used:

2. Used in the page

WXML file

<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>
Copy the code

Catchtouchmove =”swipperStop”; swipperStop =”swipperStop”

WXSS file

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

Js file

*/ data: {background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], currentTab: 0 }, setTabbar({detail}) { this.setData({currentTab: Catchtouchmove ="swipperStop" swipperStop();Copy the code

Temporarily.