微信小程序怎么实现选项卡

微信小程序怎么实现选项卡

这篇文章主要介绍“微信小程序怎么实现选项卡”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“微信小程序怎么实现选项卡”文章能帮助大家解决问题。

微信小程序之选项卡的实现方法

前言：

从事前端的同学们一定不会对选项卡陌生，不管是自己原生写的，还是各个UI框架里带的，我想大家都使用过很多选项卡，对选项卡的原理也足够清楚了，下面我们来在微信小程序里实现选项卡的功能。

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。

先看效果图：

实现代码：

页面代码：

<viewclass="swiper-tab"><viewclass="swiper-tab-item{{currentTab==0?'active':''}}"data-current="0"bindtap="clickTab">一</view><viewclass="swiper-tab-item{{currentTab==1?'active':''}}"data-current="1"bindtap="clickTab">二</view><viewclass="swiper-tab-item{{currentTab==2?'active':''}}"data-current="2"bindtap="clickTab">三</view></view><swipercurrent="{{currentTab}}"duration="300"bindchange="swiperTab"><swiper-item><view>第一屏</view></swiper-item><swiper-item><view>第二屏</view></swiper-item><swiper-item><view>第三屏</view></swiper-item></swiper>

js代码：

varapp=getApp()Page({data:{currentTab:0},onLoad:function(options){//页面初始化options为页面跳转所带来的参数},//滑动切换swiperTab:function(e){varthat=this;that.setData({currentTba:e.detail.current});},//点击切换clickTab:function(e){varthat=this;if(this.data.currentTab===e.target.dataset.current){returnfalse;}else{that.setData({currentTab:e.target.dataset.current})}}})

css代码：

.swiper-tab{width:100%;border-bottom:2rpxsolid#ccc;text-align:center;height:88rpx;line-height:88rpx;font-weight:bold;}.swiper-tab-item{display:inline-block;width:33.33%;color:red;}.active{color:aqua;border-bottom:4rpxsolidred;}

关于“微信小程序怎么实现选项卡”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注恰卡编程网行业资讯频道，小编每天都会为大家更新不同的知识点。