微信小程序 swiper实现块滑动

<!--前端样代码index.wxml-->

<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;
}

转载于:https://my.oschina.net/NeverMoreMoon/blog/887308