微信小程序模仿分类导航实现多个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
相关文章
微信小程序页面导航与路由:实现多页面跳转与数据传递
本文深入探讨微信小程序的页面导航与路由机制,介绍多种页面跳转方式如`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
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2767 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
1026 7
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
958 1

热门文章

最新文章

AI助理

你好,我是AI助理

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