微信小程序模仿分类导航实现多个tab 页

微信小程序模仿分类导航实现多个tab 页功能：如图

image.png

l5PsXOTCzU.gif

话不多说，也不知道说啥，直接上代码：

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 class="swiper-tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="clickTab">社交</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab">
  <swiper-item class="all">
    <view class="list">全部内容列表</view>
    <view class="list">全部内容列表</view>
    <view class="list">全部内容列表</view>
    <view class="list">全部内容列表</view>
  </swiper-item>

  <swiper-item class="clairy">
    <view class="list">分类内容列表</view>
    <view class="list">分类内容列表</view>
    <view class="list">分类内容列表</view>
    <view class="list">分类内容列表</view>
  </swiper-item>

  <swiper-item class="game">
    <view class="list">游戏内容列表</view>
    <view class="list">游戏内容列表</view>
    <view class="list">游戏内容列表</view>
    <view class="list">游戏内容列表</view>
  </swiper-item>

  <swiper-item class="application">
    <view class="list">应用内容列表</view>
    <view class="list">应用内容列表</view>
    <view class="list">应用内容列表</view>
    <view class="list">应用内容列表</view>
  </swiper-item>

  <swiper-item class="social">
    <view class="list">社交内容列表</view>
    <view class="list">社交内容列表</view>
    <view class="list">社交内容列表</view>
    <view class="list">社交内容列表</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;
}

.swiper-tab-item {
  width: 30%;
  color: #434343;
  /* border:1px solid #ccc; */
}

.active {
  color: rgb(89, 246, 160);
  border-bottom: 4rpx solid rgb(89, 246, 128);
}

swiper {
  text-align: center;
}

.all .list {
  height: 30pt;
}

.clairy .list {
  height: 30pt;
}

.game .list {
  height: 30pt;
}

.application .list {
  height: 30pt;
}

.social .list {
  height: 30pt;
}

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

原文作者：祈澈姑娘 原文链接：https://www.jianshu.com/u/05f416aefbe1创作不易，转载请告知 90后前端妹子，爱编程，爱运营，爱折腾。坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。