微信小程式 swiper製作tab切換實現-小程式開發-PHP中文網

首頁

微信小程式

小程式開發

微信小程式 swiper製作tab切換實現

Feb 08, 2017 pm 04:28 PM

這篇文章主要介紹了微信小程式swiper製作tab切換實現程式碼的相關資料,需要的朋友可以參考下

微信小程式swiper製作tab切換

實現效果圖：

製作tab切換微信小程序 swiper制作tab切换实现附源码

index.html

&lt;view class=&quot;swiper-tab&quot;&gt;
 &lt;view class=&quot;swiper-tab-list {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;0&quot; bindtap=&quot;swichNav&quot;&gt;Seside1&lt;/view&gt;
 &lt;view class=&quot;swiper-tab-list {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;1&quot; bindtap=&quot;swichNav&quot;&gt;Seside2&lt;/view&gt;
 &lt;view class=&quot;swiper-tab-list {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;2&quot; bindtap=&quot;swichNav&quot;&gt;Seside3&lt;/view&gt;
&lt;/view&gt;
&lt;swiper current=&quot;{{currentTab}}&quot; class=&quot;swiper-box&quot; duration=&quot;300&quot; style=&quot;height:{{winHeight - 31}}px&quot; bindchange=&quot;bindChange&quot;&gt;
 &lt;swiper-item&gt;
  &lt;view&gt;Seside1&lt;/view&gt;
 &lt;/swiper-item&gt;
 &lt;swiper-item&gt;
  &lt;view&gt;Seside2&lt;/view&gt;
 &lt;/swiper-item&gt;
 &lt;swiper-item&gt;
  &lt;view&gt;Seside3&lt;/view&gt;
 &lt;/swiper-item&gt;
&lt;/swiper&gt;

登入後複製

index.css

.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: 20%; 
  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; 
}

登入後複製

！

更多微信小程式 swiper製作tab切換實作相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn