Teilen Sie Beispiele für WeChat-Applets, die den Tab-Wechsel-Effekt realisieren

Dieser Artikel stellt hauptsächlich den Tab-Wechseleffekt des WeChat-Applets im Detail vor. Ich hoffe, dass er für alle hilfreich ist.

Der Tab-Wechseleffekt des WeChat-Miniprogramms, wie im Bild gezeigt:

Vor kurzem habe ich das WeChat-Miniprogramm kennengelernt und bin zum vorherigen Unternehmen gewechselt App zum Miniprogramm. Wählen Sie einige Implementierungseffekte aus und zeichnen Sie sie auf (hauptsächlich Dinge, die nicht in den offiziellen Dokumenten erwähnt werden, schließlich stellen die offiziellen Dokumente nur Funktionen vor)

.wxml-Code:

<view class="body">
 <view class="nav bc_white">
  <view class="{{selected?&#39;red&#39;:&#39;default&#39;}}" bindtap="selected">系统提醒</view>
  <view class="{{selected1?&#39;red&#39;:&#39;default&#39;}}" bindtap="selected1">优惠活动</view>
 </view>
 <view class="{{selected?&#39;show&#39;:&#39;hidden&#39;}}">for system</view>
 <view class="{{selected1?&#39;show&#39;:&#39;hidden&#39;}}">for activity</view>
</view>

.wxss-Code:

page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}

.js-Code:

Page({
  data:{
    selected:true,
    selected1:false
    },
  selected:function(e){
    this.setData({
      selected1:false,
      selected:true
    })
  },
  selected1:function(e){
    this.setData({
      selected:false,
      selected1:true
    })
  }
})

Verwandte Empfehlungen:

Ein detailliertes Beispiel für den Tab-Wechsel-Effekt von Vue, der den Taobao-Bestellstatus imitiert

Tab-Wechseleffekt, der häufig in js verwendet wird

JQuery-Bild-Tab-Wechseleffekt_jQuery

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele für WeChat-Applets, die den Tab-Wechsel-Effekt realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!