WeChat-Applet-Entwicklung zur Implementierung des Tab-Seitenwechsels-Mini-Programmentwicklung-php.cn

WeChat-Applet-Entwicklung zur Implementierung des Tab-Seitenwechsels

不言

Freigeben： 2018-06-23 15:42:21

Original

3060 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Wechseln der Registerkarten (TabBar oben im Fenster) in der WeChat-Applet-Entwicklung vorgestellt. Wenn Sie es benötigen, können Sie mehr darüber erfahren.

Tabs werden im WeChat-Miniprogramm entwickelt. Als es um das Miniprogramm ging, war ich sofort verwirrt Schau es dir an.

Sehen Sie sich zuerst den Effekt an:

Dann fügen Sie den Code hinzu:

1.index.wxml

<!--index.wxml--> 
<view class="swiper-tab"> 
  <view class="swiper-tab-list {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">哈哈</view> 
  <view class="swiper-tab-list {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">呵呵</view> 
  <view class="swiper-tab-list {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">嘿嘿</view> 
</view> 
 
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 
  <!-- 我是哈哈 --> 
  <swiper-item> 
   <view>我是哈哈</view> 
  </swiper-item> 
  <!-- 我是呵呵 --> 
  <swiper-item> 
   <view>我是呵呵</view> 
  </swiper-item> 
  <!-- 我是嘿嘿 --> 
  <swiper-item> 
   <view>我是嘿嘿</view> 
  </swiper-item> 
</swiper>

Nach dem Login kopieren

2.indexwxss

/**indexwxss**/ 
swiper-tab{ 
  width: 100%; 
  border-bottom: 2rpx solid #777777; 
  text-align: center; 
  line-height: 80rpx;} 
swiper-tab-list{ font-size: 30rpx; 
  display: inline-block; 
  width: 33%; 
  color: #777777; 
} 
on{ color: #da7c0c; 
  border-bottom: 5rpx solid #da7c0c;} 
 
swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
swiper-box view{ 
  text-align: center; 
}

Nach dem Login kopieren

3.index.js

rrree

Eine obere Registerkarte ähnlich einer Ansichtsseite wird angezeigt

Das Obige ist der gesamte Inhalt dieses Artikels Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Implementierung der Seitensprungwertübertragung im WeChat-Miniprogramm

WeChat-Miniprogramm So verwenden Sie textarea

WeChat-Applet Implementierung der Überwachungsgeste, die zum Seitenwechsel verschoben wird

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Entwicklung zur Implementierung des Tab-Seitenwechsels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!