微信小程序模仿分類導航實現多個tab 頁

微信小程序模仿分類導航實現多個tab 頁功能：如圖

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後前端妹子，愛編程，愛運營，愛折騰。堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家一起探討交流。