微信小程序选项卡功能开发步骤与方法全解析

<!--swipertab.wxml-->

<view class="swiper-tab"> 

    <view class="swiper-tab-list {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}" data-current="0" bindtap="swichNav">tab一</view> 

    <view class="swiper-tab-list {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}" data-current="1" bindtap="swichNav">tab二</view> 

    <view class="swiper-tab-list {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}" data-current="2" bindtap="swichNav">tab三</view> 

</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange"> 

    <!-- tab一 --> 

    <swiper-item> 

      <view>tab一</view> 

    </swiper-item> 

    <!-- tab二 --> 

    <swiper-item> 

      <view>tab二</view> 

    </swiper-item> 

    <!-- tab三 --> 

    <swiper-item> 

      <view>tab三</view> 

    </swiper-item> 

</swiper>

//获取应用实例 

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

                });

            }

        });

    },

    /**

     * 滑动切换tab

     */

    bindChange: 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

            })

        }

    }

})

.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: 33.33%; 

    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; 

}

{

    "navigationBarTitleText": "选项卡页面切换"

}