微信小程序實現選項卡滑動切換
更新時間：2020年10月22日 16:59:38 作者：Hi毛哥哥
這篇文章主要為大家詳細介紹了微信小程序實現選項卡滑動切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現選項卡滑動切換的具體代碼，供大家參考，具體內容如下
先看效果:
再上代碼:
1.index.wxml
<!--index.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>
2.index.wxss
/**index.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;
}
3.index.js
//index.js
//獲取應用實例
var app = getApp()
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
})
}
}
})
為大家推薦現在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
微信H5支付是一種支付解決方案,主要適用于商戶在微信客戶端外的移動端網頁上展示商品或服務的場景,這篇文章主要給大家介紹了關于微信公眾號h5使用微信支付及支付寶支付(前端)的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細介紹了js實現頁面多個日期時間倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了移動端橫屏的JS代碼(beta) 的相關資料,需要的朋友可以參考下2016-05-05
聲明文件是以.d.ts為后綴的文件，開發(fā)者在聲明文件中編寫類型聲明，TypeScript根據聲明文件的內容進行類型檢查，這篇文章主要介紹了TypeScript使用及類型聲明文件的相關知識,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了深入淺出webpack之externals的使用，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了webpack3升級到webpack4遇到問題總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了微信小程序實現橫向增長表格的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
JavaScript-世界上誤解最深的語言分析...2007-08-08
JavaScript中正則表達式判斷匹配規(guī)則及常用方法
JS作為一門常用于web開發(fā)的語言，必然要具備正則這種強大的特性，本文將對JS中的正則用法及常用函數進行一番總結2017-08-08
JavaScript中存在幾種對URL字符串進行編碼的方法：escape()，encodeURI()，以及encodeURIComponent()。這幾種編碼所起的作用各不相同。2011-01-01