微信小程序模仿分类导航实现多个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
      })
    }
  }
})
目录
打赏
0
0
0
0
10
分享
相关文章
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`wx.navigateTo`、`wx.redirectTo`、`wx.switchTab`等,并讲解通过URL、全局变量和事件传递数据的方法。结合案例实现多页面跳转与数据传递,帮助开发者掌握这一重要技能。
|
5月前
|
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
907 1
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
园区导航小程序:轻量级设计,打造高效智慧园区
随着园区的规模不断扩大,功能区划分日益复杂,导致访客和新员工在没有有效导航的情况下容易迷路。传统APP导航虽能解决部分问题,但其下载安装繁琐、占用手机内存大、且非高频使用导致的闲置,让许多用户望而却步。园区导航小程序的出现,以其无需下载、即用即走的特性,为访客提供一个便捷、高效的导航体验。
192 0
园区导航小程序:轻量级设计,打造高效智慧园区
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
uniapp 开发微信小程序 --【地图】打开地图选择位置,打开地图显示位置(可开启导航)
875 0
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
【微信小程序-原生开发+TDesign】地图导航(wx.openLocation的使用)
132 0
|
8月前
|
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
【微信小程序-原生开发】实用教程07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字)
145 0
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
39 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
93 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
628 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等