微信小程序之選項卡的實現方法
更新時間：2017年09月29日 14:49:03 作者：king-w
這篇文章主要介紹了 微信小程序之選項卡的實現方法的相關資料,希望大家通過本文能實現這樣的功能，需要的朋友可以參考下
微信小程序之選項卡的實現方法
前言：
從事前端的同學們一定不會對選項卡陌生，不管是自己原生寫的，還是各個UI框架里帶的，我想大家都使用過很多選項卡，對選項卡的原理也足夠清楚了，下面我們來在微信小程序里實現選項卡的功能。
微信小程序里沒有自帶選項卡組件，但是卻帶有swiper組件，所以，我們便利用swiper來實現選項卡的功能。
先看效果圖：
實現代碼：
頁面代碼：
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" 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>
js代碼：
var app=getApp()
Page({
data:{
currentTab:0
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
},
//滑動切換
swiperTab:function( e ){
var that=this;
that.setData({
currentTba:e.detail.current
});
},
//點擊切換
clickTab: function( e ) {
var that = this;
if( this.data.currentTab === e.target.dataset.current ) {
return false;
} else {
that.setData( {
currentTab: e.target.dataset.current
})
}
}
})
css代碼：
.swiper-tab{
width: 100%;
border-bottom: 2rpx solid #ccc;
text-align: center;
height: 88rpx;
line-height: 88rpx;
font-weight: bold;
}
.swiper-tab-item{
display: inline-block;
width: 33.33%;
color:red;
}
.active{
color:aqua;
border-bottom: 4rpx solid red;
}
如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
JS控制表格隔行變色...2006-06-06
強制設為首頁代碼...2006-06-06
JavaScript實際應用：innerHTMl和確認提示的使用
JavaScript實際應用：innerHTMl和確認提示的使用...2006-06-06
這篇文章主要介紹了微信小程序 開發(fā)經驗整理的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要為大家介紹了開發(fā)效率翻倍的Web?API使用技巧詳解，主要選取了一些有趣且有用的?Web?API?進行介紹，并且?API?可以在線運行預覽2023-05-05
JavaScript國際化API格式化數據Intl.NumberFormat使用講解
這篇文章主要為大家介紹了JavaScript國際化API格式化數據Intl.NumberFormat使用講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
mini?webpack打包基礎解決包緩存和環(huán)依賴
這篇文章主要為大家介紹了mini?webpack打包基礎解決包緩存和環(huán)依賴示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了threejs中使用drawbufferss示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
本文主要介紹Google 地圖API Map(),這里對Map()構造器的知識做了一下整理以及提供簡單的代碼示例,開發(fā)Google 地圖應用的朋友可以參考下2016-08-08
這篇文章主要為大家介紹了ECharts框架Sunburst拖拽功能實現方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12