Bagaimana untuk menyesuaikan komponen bar tab program mini untuk mencapai penukaran tab bawah

Artikel ini akan memperkenalkan kepada anda cara menyesuaikan komponen bar tab dalam halaman program mini untuk mencapai penukaran tab bawah.

Keperluan terkini, draf reka bentuk adalah seperti yang ditunjukkan di bawah

Untuk melaksanakan bar navigasi bawah khas, gunakan rasmi disediakan Sesuaikan komponen bar tab, tambah halaman tab bawah, dan tukar skrin percikan gambar. [Cadangan pembelajaran yang berkaitan: Tutorial pembangunan program mini]

Menyelesaikan penggunaan komponen tersuai carta karusel leret

1 -bar

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

fail 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)
    }
  }
})

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

Dua gambar digunakan:

2. Gunakan

fail wxml dalam halaman

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

Gunakan catchtouchmove= di sini " swipperStop" swipperStop ialah fungsi kosong untuk dikendalikan. Gelongsor manual adalah dilarang.

fail wxss

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

fail js

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

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

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

dilengkapkan buat sementara waktu.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan komponen bar tab program mini untuk mencapai penukaran tab bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!