하단 탭 전환을 달성하기 위해 미니 프로그램의 탭바 구성 요소를 사용자 정의하는 방법

이 글에서는 미니 프로그램 페이지에서 탭바 구성 요소를 사용자 정의하고 하단 탭 전환을 구현하는 방법을 소개합니다.

최근 수요가 있는 디자인 초안은 그림과 같습니다.

특수 하단 네비게이션 바를 구현하려면 공식 커스텀 탭바 컴포넌트를 사용하고 하단 탭 페이지를 추가하고 이미지 스플래시 화면을 전환합니다. [관련 학습 추천 : 미니 프로그램 개발 튜토리얼]

스와이프 캐러셀 + 커스텀 컴포넌트를 이용한 솔루션

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 === &#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 파일

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

파일:

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"이 사용됩니다. 수동 슬라이딩 금지

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(){
  },

임시 완료되었습니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 하단 탭 전환을 달성하기 위해 미니 프로그램의 탭바 구성 요소를 사용자 정의하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!