微信小程序开发之选项卡，swiper实现块滑动

一：微信小程序开发之选项卡

 
选项卡是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
            })
        }
    },
})

参考文章：

二：swiper实现块滑动

<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>奥迪</text>
                </view>
                <view class="letter-brand-item">
                    <text>阿尔法·罗密欧</text>
                </view>
            </view>
        </swiper-item>
    </swiper>
</view>

//index.js

var app = getApp();
Page({
    data: {},
    customData: {},
    onLoad: function (params) {
        //页面加载完成提示
        this.data.styles = {};
        this.data.styles.curtainViewWidth = 590;
        this.data.styles.curtainViewRight = -(this.data.styles.curtainViewWidth + 100);
        this.data.tabIndex = 0;
        this.data.list = new Array(3);
        this.changeTab(0);
        //获取系统信息
        var that = this;
        wx.getSystemInfo({
            success: function (info) {
                that.data.windowHeight = info.windowHeight;
                that.setData(that.data);
                console.log(that.data.windowHeight);
            }
        });
    },
    tabItemClick: function (event) {
        this.changeTab(parseInt(event.currentTarget.id.split("_")[1]));
    },
    swiperChange: function (event) {
        this.changeTab(event.detail.current);
    },
    changeTab: function (index) {
        this.data.tabIndex = index;
        this.setData(this.data);
    }
});

//index.wxss

/**index.wxss**/
.find-car-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 690rpx;
    height: 88rpx;
    padding: 0 30rpx;
    background-color: #eee;
    border-bottom: 2rpx solid #d2d2d2;
}
.tab {
    float: left;
    width: 330rpx;
    height: 88rpx;
}
.tab .tab-item {
    float: left;
    width: 140rpx;
    height: 88rpx;
    font-size: 30rpx;
    line-height: 88rpx;
    text-align: center;
    color: #333;
}
.tab .tab-item:first-child {
    margin-right: 50rpx;
}
.tab .active {
    position: relative;
    color: #0f69d7;
}
.tab .active:after {
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 4rpx;
    content: '';
    background: #0f69d7;
}
.content {
    z-index: 0;
    width: 750rpx;
    height: 100%;
    box-sizing: border-box;
}
.swiper-item {
    width: 100%;
    overflow-x: hidden;
}
.letter-brand-list {
    width: 720rpx;
    padding-left: 30rpx;
    background-color: #fff;
}
.letter-brand-item {
    width: 690rpx;
    height: 90rpx;
    padding: 10rpx 30rpx 10rpx 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 28rpx;
    line-height: 90rpx;
    color: #333;
}
.letter-brand-list .letter-brand-item:last-child {
    border: 0;
}