10行代碼實現(xiàn)微信小程序滑動tab切換
更新時間：2018年12月28日 17:02:14 作者：豆i漿
這篇文章主要為大家詳細介紹了10行代碼實現(xiàn)微信小程序滑動tab切換效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序滑動tab切換展示的具體代碼，供大家參考，具體內(nèi)容如下
效果預覽:
js部分：
Page({
data: {
arr: [1,2,3,4,5,6,7,8],
index: 1
},
onLoad: function (options) {
this.setData({
childW: this.data.arr.length * 80
});
},
tabOn: function (e) {
this.setData({
index: e.currentTarget.dataset.index + 1
});
}
})
wxtml部分：
<scroll-view scroll-x scroll-with-animation='true'>
<view style='width: {{ childW }}px'>
<block wx:for='{{ arr }}'>
<view class='tab' catchtap='tabOn' data-index='{{ index }}'>{{ item }}</view>
</block>
</view>
</scroll-view>
<view class='content' wx:if='{{ index == 1 }}'>內(nèi)容一</view>
<view class='content' wx:if='{{ index == 2 }}'>內(nèi)容二</view>
<view class='content' wx:if='{{ index == 3 }}'>內(nèi)容三</view>
<view class='content' wx:if='{{ index == 4 }}'>內(nèi)容四</view>
<view class='content' wx:if='{{ index == 5 }}'>內(nèi)容五</view>
<view class='content' wx:if='{{ index == 6 }}'>內(nèi)容六</view>
<view class='content' wx:if='{{ index == 7 }}'>內(nèi)容七</view>
<view class='content' wx:if='{{ index == 8 }}'>內(nèi)容八</view>
wxss部分：
.tab{
height: 50px;
width: 80px;
display: inline-block;
text-align: center;
line-height: 50px;
}
.tab:nth-child(odd){
background-color: #ccc;
}
.content{
width: 100%;
height: 200px;
text-align: center;
line-height: 200px;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ES6新增的math,Number方法,小編覺得非常不錯，需要的朋友參考下吧2017-08-08
這篇文章主要介紹了JS實現(xiàn)多物體緩沖運動實例代碼，有需要的朋友可以參考一下2013-11-11
JavaScript中如何判斷一個變量是數(shù)組Array類型呢？本文向大家提供一個比較不錯的方法，可以說是無懈可擊了2013-09-09
這篇文章主要介紹了如何在 JavaScript 數(shù)組中插入元素,在本文中,我們學習了使用?splice()?方法將元素添加到數(shù)組的開始、末尾或任何位置的各種方法,需要的朋友可以參考下2023-09-09
Javascript操作表格 包括獲取值，創(chuàng)建表格2009-06-06
這篇文章主要介紹了JS實現(xiàn)的JSON數(shù)組去重算法,結(jié)合實例形式分析了javascript針對json數(shù)組的遍歷、判斷實現(xiàn)去重復功能相關操作技巧,需要的朋友可以參考下2018-04-04
靜態(tài)的動態(tài)續(xù)篇之來點XML...2006-08-08
各種電商活動都喜換選擇限時秒殺活動形式，這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)限時秒殺功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
CSS的確是很強大，很奇妙。很多愛好者時?？梢杂肅SS做出一些讓人意想不到的效果，比如用CSS做的燈籠、用CSS畫的房子！然而這些東西酷歸酷，說到底還只是一些不實用的東西。過濾之，過濾之……2008-11-11
這篇文章主要介紹了微信小程序地圖繪制線段并且測量,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01