So implementieren Sie Tabs in WeChat-Miniprogrammen

Die Anwendung von Tabs in WeChat-Miniprogrammen ist überall zu sehen. In diesem Artikel wird Ihnen die Implementierung von Tabs in WeChat-Miniprogrammen vorgestellt.

Ideen

• Ich habe bereits eine Swiper-Komponente im Miniprogramm geschrieben. Es besteht kein Zweifel, dass es sich um eine Swiper-Komponente handelt wird hier verwendet

• Die Swiper-Komponente im Applet hat das Problem, dass sie die Höhe nicht an den Inhalt anpassen kann, daher müssen Sie die Gerätehöhe über wx.getSystemInfoSync abrufen, um die festzulegen Swiper-Höhe

• Der Inhalt des Swiper-Elements in der Swiper-Komponente im Applet kann nicht gescrollt werden, nachdem er den sichtbaren Bereich überschreitet, daher wird hier eine andere Komponenten-Scroll-Ansicht verwendet.

Die Funktion der Swiper-Komponente im Miniprogramm ist noch relativ eingeschränkt und muss optimiert werden.

Schema

1. Legen Sie zuerst die Daten in js fest

 data: {
    tabs: ['菜单一', '菜单二'],// 导航菜单栏
    curIdx:0,// 当前导航索引
    scrollHeight:0, //滚动高度 = 设备可视区高度 -  导航栏高度
    list:[],// 内容区列表
  },

Füllen Sie die Daten in die onLoad-Funktion

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let list=[];
    for (let i=1;i<=30;i++){
      list.push(i)
    }
    this.setData({
      list: list
    });
  },

2 Navigation rendern

<!-- 导航栏开始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?&#39;swiper-active&#39;:&#39;&#39;}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text>
  </view>
</view>

3. Stellen Sie den aktuell aktiven Navigationsstil ein

/*初始化样式*/
view, text, picker, input, button, image{
  display: flex;
  box-sizing: border-box;
}
/* 导航样式*/
.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}
.swiper-active{
  background-color: rgb(129, 190, 247);
  color: #fff;
}

4. Inhaltsanzeigebereich

Der Inhaltsanzeigebereich verwendet die Swiper-Komponente und die Anzahl der Swiper- Die Elemente müssen der Anzahl der Tabs entsprechen. Die Array-Längen sind konsistent

<!-- 内容开始 -->
<swiper class="swiper_content" current="{{curIdx}}"   bindchange="swiperTab" style=&#39;height:{{scrollHeight}}px&#39;>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style=&#39;height:{{scrollHeight}}px&#39; bindscrolltolower="onReachBottom">
    <view wx:for="{{list}}" wx:key>
      <text> 内容一{{item}}</text>
    </view>
        </scroll-view>
  </swiper-item>
  <swiper-item>
    内容二
  </swiper-item>
</swiper>

小程序中的swiper组件有个问题就是不能根据内容自适应高度，所以要通过[wx.getSystemInfoSync][4]获取设备高度设置swiper高度
小程序中的swiper组件中swiper-item内容超出可视区后无法滚动显示，所以这里要用到另一个组件[scroll-view][5]。
Wir erhalten die Breite und Höhe des Geräts über getSystemInfoSync in der onShow-Funktion, um sie festzulegen die Höhe der Wischkomponente und die Höhe der Bildlaufansicht

  onShow: function () {
    // 100为导航栏swiper-tab 的高度
   this.setData({
     scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
   })
  },

5. Klicken Sie auf die Navigationsleiste, um den Inhalt zu wechseln

  //点击切换
  clickTab: function (e) {
    this.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },

6 . Scrollen Sie im scrollbaren Bereich nach unten, um die Daten zu aktualisieren

  //滑动切换
  swiperTab: function (e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

Eine schöne Option. Die Karte ist fertig.

Vollständiger Fall

Das Obige ist der gesamte Inhalt dieses Artikels. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Tabs in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!