[摘要]这篇文章主要介绍了 微信小程序之选项卡的实现方法的相关资料,希望大家通过本文能实现这样的功能,需要的朋友可以参考下 微信小程序之选项卡的实现方法前言:从事前端的同学们一定不会对选项卡陌生,不管是自己...
这篇文章主要介绍了 微信小程序之选项卡的实现方法的相关资料,希望大家通过本文能实现这样的功能,需要的朋友可以参考下
微信小程序之选项卡的实现方法
前言:
从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能。
微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能。
先看效果图:
实现代码:
页面代码:
<view class="swiper-tab">
<view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">一</view>
<view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">二</view>
<view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">三</view>
</view>
<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
<swiper-item><view>第一屏</view></swiper-item>
<swiper-item><view>第二屏</view></swiper-item>
<swiper-item><view>第三屏</view></swiper-item>
</swiper>