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

52 篇文章 52 订阅

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


5640239-5f3758edb49ee1b8.gif
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后前端妹子,爱编程,爱运营,爱折腾。坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

  • 3
    点赞
  • 0
    评论
  • 4
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值