WeChat applet swiper makes tab switch implementation with source code, swipertab

The small program swiper makes the tab switch implementation with the source code, swipertab

Small Program swiper makes tab Switch

Implementation:

Create a tab switch using swiper

Index.html

<view class="swiper-tab"> <view class="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>

Index.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; }.on{  color: #da7c0c;   border-bottom: 5rpx solid #da7c0c;}.swiper-box{   display: block;  height: 100%;  width: 100%;  overflow: hidden; }.swiper-box view{   text-align: center; }

Index. js

// Index. js // obtain the application instance var app = getApp () Page ({data: {// configure winWidth: 0, winHeight: 0, // tab to switch currentTab: 0 ,}, onLoad: function () {var that = this; // obtain system information wx. getSystemInfo ({success: function (res) {that. setData ({winWidth: res. required wwidth, winHeight: res. windowHeight}) ;}}) ;}, // slide the switch tab bindChange: function (e) {var that = this; that. setData ({currentTab: e. detail. current}) ;}, // click the tab to switch to swichNav: function (e) {var that = this; if (this. data. currentTab = e.tar get. dataset. current) {return false;} else {that. setData ({currentTab: e.tar get. dataset. current })}}})

Source code download: http://xiazai.jb51.net/201701/yuanma/tabdemo03 (jb51.netw..rar

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!