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

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

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

话不多说,也不知道说啥,直接上代码:

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
      })
    }
  }
})
相关文章
|
2月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
638 1
|
3月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
4月前
|
存储 小程序 物联网
园区导航小程序:轻量级设计,打造高效智慧园区
随着园区的规模不断扩大,功能区划分日益复杂,导致访客和新员工在没有有效导航的情况下容易迷路。传统APP导航虽能解决部分问题,但其下载安装繁琐、占用手机内存大、且非高频使用导致的闲置,让许多用户望而却步。园区导航小程序的出现,以其无需下载、即用即走的特性,为访客提供一个便捷、高效的导航体验。
121 0
园区导航小程序:轻量级设计,打造高效智慧园区
|
5月前
|
小程序 定位技术 API
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
491 0
|
5月前
|
小程序 定位技术
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
98 0
|
5月前
|
小程序 API
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
116 0
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
177 0
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
690 7
|
2月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
745 1
|
2月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
146 7