微信小程序 tab选项卡

分手后的思念是犯贱 2021-11-05 07:30 390阅读 0赞

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

.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 class="swiper-tab-item {
       {currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">支付</view>
    </view>
    
    <swiper current="{
       {currentTab}}" duration="300"  bindchange="swiperTab">
        <swiper-item ><view>111</view></swiper-item>
        <swiper-item><view>222</view></swiper-item>
        <swiper-item><view>333</view></swiper-item>
        <swiper-item><view>444</view></swiper-item>
    </swiper>

.wxss

.swiper-tab{
        /* width: 100%; */
        border-bottom: 2rpx solid #ccc;
        text-align: center;
        height: 88rpx;
        line-height: 88rpx;
        display: flex;
        flex-flow: row;
        justify-content: space-between;
        margin: 0 60rpx;
    
    }
    .swiper-tab-item{
        width: 30%; 
        color:#434343;
    }
    .active{
        color:#9DA7E7;
        border-bottom: 4rpx solid #9DA7E7;
        font-weight: bold;
    }
    swiper{
      text-align: center;
      margin: 0 60rpx; 
    }

.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
          })
        }
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: /images/20211104/d2d24575c72f49c0904eb84e95c57376.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关小程序Tab选项卡

Tab选项卡下拉刷新、上拉加载更多数据空白页面显示滑动时，当页面无数据时才会触发刷新网上小程序Tab选项卡的文章有很多，可都无法实现加载更多，

朴灿烈づ我的快乐病毒、/ 2023年05月22日 10:22/ 0 赞/ 13 阅读

相关微信小程序_tab选项卡1

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2023年03月12日 15:25/ 0 赞/ 9 阅读

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

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

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

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

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

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

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

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

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

相关微信小程序 tab选项卡

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

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

相关小程序如何写tab选项卡

![效果图片][20190819102433946.gif] tab切换效果 wxml <view class="content"> <!--头部t

今天药忘吃喽~/ 2021年10月19日 07:24/ 0 赞/ 382 阅读

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

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

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

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

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

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