Das WeChat-Applet implementiert eine einfache Tab-Schiebe-Umschaltmethode (Code).

Der Inhalt dieses Artikels befasst sich mit der Implementierung einer einfachen Tab-Slide-Switching-Methode (Code) im WeChat-Applet. Ich hoffe, dass er Ihnen weiterhilft.

Ich habe kürzlich an einem kleinen Programmprojekt gearbeitet, und es ist für verschiedene Anforderungen wirklich ärgerlich. Die Bestellseite, die ich zuvor erstellt habe, muss nur anklickbar sein, um zu wechseln, aber in den späteren Iterationen wurde das erwähnt Es kann ein Schiebeschalter sein. Nachfolgend habe ich eine Reihe relativ einfacher und gewalttätiger Schiebeschaltmethoden zusammengestellt, die ich mit Ihnen teilen möchte. Unten finden Sie Darstellungen. (Neuling auf der Straße, kommentieren Sie nicht, wenn es Ihnen nicht gefällt):

.wxml

<!--pages/mine/order/order.wxml-->
<view class=&#39;order&#39;>
  <view class="swiper-tab">
    <view class="swiper-tab-item {{currentTab==0?&#39;active&#39;:&#39;&#39;}}" data-current="0" bindtap="clickTab">代付款</view>
    <view class="swiper-tab-item {{currentTab==1?&#39;active&#39;:&#39;&#39;}}" data-current="1" bindtap="clickTab">代发货</view>
    <view class="swiper-tab-item {{currentTab==2?&#39;active&#39;:&#39;&#39;}}" data-current="2" bindtap="clickTab">待收货</view>
    <view class="swiper-tab-item {{currentTab==3?&#39;active&#39;:&#39;&#39;}}" data-current="3" bindtap="clickTab">待评价</view>
    <view class="swiper-tab-item {{currentTab==4?&#39;active&#39;:&#39;&#39;}}" data-current="4" bindtap="clickTab">退款/售后</view>
  </view>
  <swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
    <swiper-item>
      <view>代付款</view>
    </swiper-item>
    <swiper-item>
      <view>代发货</view>
    </swiper-item>
    <swiper-item>
      <view>待收货</view>
    </swiper-item>
    <swiper-item>
      <view>待评价</view>
    </swiper-item>
    <swiper-item>
      <view>退款/售后</view>
    </swiper-item>
  </swiper>
</view>

.wxss

/* pages/mine/order/order.wxss */
.swiper-tab {
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}

.swiper-tab-item {
    width: 30%;
    color: #434343;
    font-size: 28rpx;
}

.active {
    color: #f65959;
    border-bottom: 4rpx solid #f65959;
}

swiper {
    text-align: center;
    background-color: #fff
}

.js

// pages/mine/order/order.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentTab: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  //滑动切换
  swiperTab: function (e) {
    this.setData({
      currentTab: e.detail.current
    });
  },

  //点击切换
  clickTab: function (e) {
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      this.setData({
        currentTab: e.target.dataset.current
      })
    }
  }
  
})

Rendering:

Sie können wx:for tatsächlich in der wxml verwenden Teil.

Verwandte Empfehlungen:
WeChat-Applet-Beispiel: Code-Implementierung und Analyse eines Karusselldiagramms

Implementierungscode der unteren Navigationsleiste im WeChat-Applet

Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert eine einfache Tab-Schiebe-Umschaltmethode (Code).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!