分享者:心存善念,来自原文地址
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡
实现思路:
通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示),达到切换展示电影和游戏的目的
代码:
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>
-
-
<view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>
-
<view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>
2.index.wxss
-
.swiper-tab {
-
width: 100%;
-
text-align: center;
-
line-height: 80rpx;
-
background-color:white;
-
}
-
-
.swiper-tab-list {
-
font-size: 30rpx;
-
display: inline-block;
-
width: 50%;
-
color: #777;
-
border-bottom: 0rpx;
-
}
-
-
.on {
-
color: #da7c0c;
-
border-bottom: 2rpx 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: {
-
isShow: true,
-
currentTab: 0,
-
},
-
-
swichNav: function (e) {
-
if (this.data.currentTab === e.target.dataset.current) {
-
return false;
-
} else {
-
var showMode = e.target.dataset.current == 0;
-
this.setData({
-
currentTab: e.target.dataset.current,
-
isShow: showMode
-
})
-
}
-
},
-
})
参考文章:http://blog.csdn.net/qq_31383345/article/details/52900835
二:swiper实现块滑动
分享者:NeverMore_Jugg,来自原文地址
-
<view class="container" style="height: {{ windowHeight }}px;">
-
<view class="find-car-header">
-
<view class="tab">
-
<view bindtap="tabItemClick" id="tabItem_0" class="tab-item {{tabIndex == 0 ? 'active' : ''}}">页签1</view>
-
<view bindtap="tabItemClick" id="tabItem_1" class="tab-item {{tabIndex == 1 ? 'active' : ''}}">页签2</view>
-
</view>
-
</view>
-
<swiper bindchange="swiperChange" current="{{tabIndex}}" duration="600" class="content">
-
<swiper-item class="swiper-item">
-
<view class="letter-brand-list">
-
<view class="letter-brand-item">
-
<text>Artega</text>
-
</view>
-
<view class="letter-brand-item">
-
<text>阿斯顿·马丁</text>
-
</view>
-
<view class="letter-brand-item">
-
<text>奥迪</text>
-
</view>
-
<view class="letter-brand-item">
-
<text>阿尔法·罗密欧</text>
-
</view>
-
</view>
-
</swiper-item>
-
<swiper-item class="swiper-item">
-
<view class="letter-brand-list">
-
<view class="letter-brand-item">
-
<text>Artega</text>
-
</view>
-
<view class="letter-brand-item">
-
<text>阿斯顿·马丁</text>
-
</view>
-
<view class="letter-brand-item">
-
<text>奥迪
|