微信小程序选项卡功能的开发

微信小程序选项卡功能的开发
在pages文件里面创建swipertab文件夹1.编写页面结构:swipertab.wxml tab一 tab二 tab三 tab一 tab二 tab三

本文主要和大家分享微信小程序选项卡功能的开发，希望能帮助到大家

在pages文件里面创建swipertab文件夹

1.编写页面结构:swipertab.wxml

<!--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>