So passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichen

青灯夜游
Freigeben: 2021-10-09 10:10:04
nach vorne
4431 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie die Tabbar-Komponente auf der Miniprogrammseite anpassen und den Wechsel der unteren Tabs erreichen. 🔜 [Verwandte Lernempfehlungen:

Mini-Tutorial zur Programmentwicklung

]So passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichen

Lösung mit Swiper-Karussell + benutzerdefinierter Komponente

So passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichen1. Schreiben Sie die benutzerdefinierte Komponente jtab-bar

wxml-Datei

js-Datei

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)
    }
  }
})
Nach dem Login kopieren
wxss. Zwei Bilder werden verwendet in der Datei

.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;
}
Nach dem Login kopieren

:

2. Die

wxml-Datei

<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>
Nach dem Login kopieren

So passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichen wird hier als leere Funktion zur Verarbeitung verwendet Manuelles Schieben ist verboten

So passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichenwxss-Datei

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

js-Datei

/**
   * 页面的初始数据
   */
  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(){
  },
Nach dem Login kopieren

vorübergehend abgeschlossen.

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Programmiervideos

! !

Das obige ist der detaillierte Inhalt vonSo passen Sie die Tabbar-Komponente des Miniprogramms an, um einen Wechsel der unteren Tabs zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:juejin.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage