ミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法

青灯夜游
リリース: 2021-10-09 10:10:04
転載
4433 人が閲覧しました

この記事では、ミニ プログラム ページのタブバー コンポーネントをカスタマイズして、下部のタブ切り替えを実現する方法を紹介します。

ミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法

最近の要件、設計草案は次のとおりです。

ミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法

特別な下部ナビゲーション バーを実装するには、公式のタブバーコンポーネントをカスタマイズし、下部タブページを追加し、画像スプラッシュ画面を切り替えます。 [関連する学習の推奨事項: 小さなプログラム開発チュートリアル ]

スワイパー カルーセル チャートのカスタム コンポーネントを使用する解決策

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: &#39;text&#39;,
      text: "首页"
    }, 
    {
      type: &#39;image&#39;,
      icon: &#39;../../image/icon_map.png&#39;,
      iconSelect: &#39;../../image/icon_map_select.png&#39;,
      text: &#39;&#39;
    }, 
    {
      type: &#39;text&#39;,
      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 つの画像:

ミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法

ミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法

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: [&#39;demo-text-1&#39;, &#39;demo-text-2&#39;, &#39;demo-text-3&#39;],
    currentTab: 0
  },

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

  // 轮播图 禁止手动滑动 catchtouchmove="swipperStop"
  swipperStop(){
  },
ログイン後にコピー

が一旦完了しました。

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !

以上がミニプログラムのタブバーコンポーネントをカスタマイズして下部タブの切り替えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート