微信小程序中swiper实现切换

1、wxml中关键代码：<view class屏顿幂垂="swiper-tab"><view cl锾攒揉敫ass="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">Seside1</view><view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">Seside2</view><view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">Seside3</view></view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"><swiper-item><view>Seside1</view></swiper-item><swiper-item><view>Seside2</view></swiper-item><swiper-item><view>Seside3</view></swiper-item></swiper>

2、js代码://index.js//获取应用实例var app = getApp()Page({data: { // 页面配置 winWidth: 0, winHeight: 0, // tab切换 currentTab: 0,},onLoad: function () { var that = this; // 获取系统信息 wx.getSystemInfo({ success: function (res) { that.setData({ winWidth: res.windowWidth, winHeight: res.windowHeight }); } });},// 滑动切换tabbindChange: 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 }) }}})

3、css代码：.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: 20%;color: #777777;margin-right: 4%; margin-left: 4%;}.on{color: #da7c0c;border-bottom: 5rpx solid #da7c0c;}.swiper-box{display: block;height: 100%;width: 100%;overflow: hidden;}.swiper-box view{text-align: center;}