小程序Tab选项卡滑动切换

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

先看效果图:


image.png

实现代码:
页面代码:

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

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

})

css代码

/**index.wxss**/
.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;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 最近,网络再一次被《我的前半生》里的罗子君刷屏。“被出轨”“天塌了”是因为“经济不独立”。进而以次作为反面教材,鼓...
    心依旧每天1000字阅读 594评论 4 5
  • 天天吃猪肉,不思猪怎死。年年杀猪饭,相聚举杯欢。追述网络亲,眼证血腥面。吞噬喉上涌,心惊人间道。一年辛苦忙,只为偿...
    寒寒雪雪阅读 213评论 0 0
  • 东伯雪鹰微微一笑:“夏风古国是要独占这典籍,禁止我外传出去了?独占,我开口自然不一样了。” “你说。”夏皇也俯瞰下...
    im喵小姐阅读 526评论 0 0
  • 阿敏拖着一身疲惫走进了卧室,屋子里立刻充满酒气。她连灯都没开,倒头就躺在床上,发出轻微的呼吸。 她旁边的男人把手机...
    风花星月阅读 2,070评论 4 32