微信小程序實現(xiàn)選項卡效果

更新時間：2018年11月06日 11:35:09 作者：nobug12138

這篇文章主要介紹了微信小程序實現(xiàn)選項卡效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序實現(xiàn)選項卡效果展示的具體代碼，供大家參考，具體內容如下

demo.wxss

.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.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; 
}

demo.wxml

<view class="swiper-tab"> 
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view> 
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view> 
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" 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>

demo.js

Page( { 
 data: { 
  /** 
    * 頁面配置 
    */ 
  winWidth: 0, 
  winHeight: 0, 
  // tab切換 
  currentTab: 0, 
 }, 
 onLoad: function() { 
  var that = this; 

  /** 
   * 獲取系統(tǒng)信息 
   */ 
  wx.getSystemInfo( { 

   success: function( res ) { 
    that.setData( { 
     winWidth: res.windowWidth, 
     winHeight: res.windowHeight 
    }); 
   } 

  }); 
 }, 
 /** 
   * 滑動切換tab 
   */ 
 bindChange: function( e ) { 

  var that = this; 
  that.setData( { currentTab: e.detail.current }); 

 }, 
 /** 
  * 點擊tab切換 
  */ 
 swichNav: function( e ) { 

  var that = this; 

  if( this.data.currentTab === e.target.dataset.current ) { 
   return false; 
  } else { 
   that.setData( { 
    currentTab: e.target.dataset.current 
   }) 
  } 
 } 
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js高精度計算decimal.js庫用法demo
這篇文章主要給大家介紹了關于js高精度計算decimal.js庫用法的相關資料,decimal.js是使用的二進制來計算的,所以能解決js的精度問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
詳解微信小程序文件下載--視頻和圖片
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
javascript判斷用戶瀏覽器插件安裝情況的代碼
javascript判斷用戶瀏覽器插件安裝情況的代碼，需要的朋友可以參考下。
2011-01-01
javascript如何操作HTML下拉列表標簽
下拉列表在網(wǎng)站前端開發(fā)中經(jīng)常遇到，如何操作html下拉列表標簽，本篇文章給大家詳解javascript如何操作html下拉列表標簽，需要的朋友可以來參考下
2015-08-08
JS數(shù)字抽獎游戲實現(xiàn)方法
這篇文章主要介紹了JS數(shù)字抽獎游戲實現(xiàn)方法,可實現(xiàn)按下回車鍵出現(xiàn)隨機數(shù)字切換的效果,涉及時間與隨機數(shù)的相關操作技巧,非常具有實用價值,需要的朋友可以參考下
2015-05-05
JS實現(xiàn)可調整倒計時間代碼分享
這篇文章主要介紹了JS實現(xiàn)可調整倒計時間代碼，效果很酷炫，也很具有實用價值，感興趣的小伙伴們可以參考一下
2015-08-08
ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用
本文主要介紹了ES6數(shù)組復制和填充方法copyWithin()、fill()的具體使用，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
webpack4升級到webpack5的實戰(zhàn)經(jīng)驗總結
有些老項目的包長時間沒有更新,導致項目中有些性能問題,在項目迭代中考慮升級包,下面這篇文章主要給大家介紹了關于webpack4升級到webpack5的實戰(zhàn)經(jīng)驗,需要的朋友可以參考下
2022-08-08
JavaScript中幾種常見排序算法小結
JavaScript中幾種常見排序算法小結，學習js的朋友可以參考下，下面對多種方法進行了簡單的小結。
2011-02-02
fabric.js實現(xiàn)diy明信片功能
這篇文章主要為大家詳細介紹了fabric.js實現(xiàn)diy明信片功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03