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

￡神魔★判官ぃ 2022-03-19 02:37 370阅读 0赞

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。  
先看效果图：  
![在这里插入图片描述][20190214163540460.png]  
![在这里插入图片描述][20190214163554577.png]  
test.wxml

<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 class='swi' 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>

test.js

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

test.wxss

.swi {
      width: 100%;
      height: 100vh;
    
    }
    .swiper-tab{
      width: 100%;
      border-bottom: 2rpx solid #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: 4rpx solid red;
    }

[20190214163540460.png]: /images/20220319/44f957b1200e495285985803c5d8f0e9.png
[20190214163554577.png]: /images/20220319/c32b3d48b8ae4eec9b07c9397f5f3442.png

发表评论取消回复

表情：

评论列表（有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序实现tabs选项卡

选项卡在我们的日常开发中，使用的还是蛮多的，但是微信小程序中却没有直接提供选项卡组件，不过我们可以变通通过 scroll-view 和 swiper 组件来实现一个选项卡的功能

女爷i/ 2024年02月19日 18:44/ 0 赞/ 25 阅读

相关微信小程序设置底部tab选项卡

微信小程序选项卡用到tabbar组件。在app.json中添加tabbar组件即可。（输入会自动补全） list存放的就是tab选项卡了。一个对象就是一个选项卡，官方规定

小咪咪/ 2022年05月23日 08:12/ 0 赞/ 457 阅读

相关微信小程序Tab选项卡切换大集合

> 代码地址如下： > [http://www.demodashi.com/demo/14028.html][http_www.demodashi.com_demo_140

柔光的暖阳◎/ 2022年05月10日 00:46/ 0 赞/ 308 阅读

相关微信小程序-滚动Tab选项卡

转载至[https://www.jianshu.com/p/94849f9c2ff2][https_www.jianshu.com_p_94849f9c2ff2] 今天呢给大

╰+攻爆jí腚メ/ 2022年03月27日 06:18/ 0 赞/ 381 阅读

相关微信小程序选项卡的简单实例

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

柔光的暖阳◎/ 2022年03月27日 02:46/ 0 赞/ 284 阅读

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

微信小程序里没有自带选项卡组件，但是却带有swiper组件，所以，我们便利用swiper来实现选项卡的功能。先看效果图： ![在这里插入图片描述][201902141

￡神魔★判官ぃ/ 2022年03月19日 02:37/ 0 赞/ 371 阅读

相关微信小程序之选项卡窗口顶部TabBar页面切换

微信小程序之选项卡窗口顶部TabBar页面切换最近在做小程序相关的开发，用到了类似某宝类似的滑动tabBar实现页面的切换，在网上看到的大多资料鱼龙混杂、模糊不清、有

谁借莪１个温暖的怀抱￠/ 2022年02月28日 02:04/ 0 赞/ 628 阅读

相关微信小程序 tab选项卡

效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

分手后的思念是犯贱/ 2021年11月05日 07:30/ 0 赞/ 361 阅读

相关微信小程序的wx-charts插件-tab选项卡

微信小程序的wx-charts插件-tab选项卡 ![yangyan4.png][] > 微信小程序的wx-charts插件-tab选项卡效果: ![GIF.gif

青旅半醒/ 2021年09月17日 03:10/ 0 赞/ 291 阅读

相关微信小程序开发—(三)选项卡

在pages文件里面创建swipertab文件夹 1.编写页面结构:swipertab.wxml  <v

亦凉/ 2021年09月12日 06:02/ 0 赞/ 433 阅读