react 实现tab切换 三角形筛选样式

最新推荐文章于 2022-03-31 00:59:39 发布
置顶 最新推荐文章于 2022-03-31 00:59:39 发布
阅读量512 收藏 1
点赞数 1
分类专栏： tab react 筛选 文章标签： react.js 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lastone1212/article/details/122099054
版权

react 实现tab切换 三角形筛选样式

              接下来上效果

 

这次使用的是react的class 类组件

import React, { Component } from 'react'
import { LeftOutline, SearchOutline } from 'antd-mobile-icons'
import { NavLink } from 'react-router-dom'
class serach extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sousuo: '',
      // tab 数据渲染
      lis: ['发布时间', '产品价格', '收藏量', '评论量'],
      // tab切换默认标识
      acyive: 0,
      // 定义空字符串 不点击 不高亮
      active2: '',
      // 定义空字符串 不点击 不显示
      show: '',
    }
  }
  // 获取seach值
  seacrsh = (e) => {
    this.setState({
      sousuo: e.target.value,
    })
  }
  // 函数结束
  tab = (index) => {
    console.log(index)
    this.setState({
      acyive: index,
      show: '',
    })
  }
  // 切换内部  下面三角形点击函数
  // 判断切换 如果点击了内部 触发了冒泡可以用e.stopPropagation()解决,在此需要判断如果没有点击tab 就点击了tab内的上下三角形筛选 就需要 改变tab acyive 标识
  tabqh2 = (e, index) => {
    e.stopPropagation()
    if (index == 0) {
      this.setState({
        acyive: 0,
      })
    } else if (index == 1) {
      this.setState({
        acyive: 1,
      })
    } else if (index == 2) {
      this.setState({
        acyive: 2,
      })
    } else {
      this.setState({
        acyive: 3,
      })
    }
    console.log(index)

    console.log(this.state.acyive)
    this.setState({
      active2: index,
      show: 1,
    })
  }
  // 上面三角形点击点击函数
  tabqh = (e, index) => {
    e.stopPropagation()
    console.log(index)
    if (index == 0) {
      this.setState({
        acyive: 0,
      })
    } else if (index == 1) {
      this.setState({
        acyive: 1,
      })
    } else if (index == 2) {
      this.setState({
        acyive: 2,
      })
    } else {
      this.setState({
        acyive: 3,
      })
    }
    console.log(this.state.acyive)
    this.setState({
      active2: index,
      show: 0,
    })
  }

  render() {
    return (
      <div className="lxf_serach">
        {/* top */}
        <div className="lxf_serach_top">
          <div className="lxf_serach_top_centent">
            <div className="lxf_serach_top_centent_nei">
              <div className="left">
                <NavLink to="">
                  <LeftOutline fontSize={20} color="white" />
                </NavLink>
              </div>
              <div className="center">
                <img src={require('../lxf/imger/sousuo.png')} alt="" />
                <input
                  type="text"
                  placeholder="请搜索"
                  onChange={this.seacrsh}
                  style={{ textIndent: '30px' }}
                />
              </div>
              <div className="right">
                <span>搜索</span>
              </div>
            </div>
          </div>
        </div>
        {/* /top */}
        {/*选项卡  */}
        <div className="lxf_serach_xxk">
          <div className="lxf_serach_xxk_centen">
            <div className="lxf_serach_xxk_centen_qy">
              <ul>
                {this.state.lis.map((item, index) => {
                  return (
                    <li
                      onClick={() => this.tab(index)}
                      key={index}
                      className={this.state.acyive == index ? 'color' : ''}
                    >
                      <span>{item}</span>
                      {/* 三角形 */}
                      <div className="sanjiaoxing_big">
                        <div
                          onClick={(e) => this.tabqh(e, index)}
                          className={
                            this.state.active2 == index
                              ? this.state.show === 0
                                ? 'top s'
                                : 'top'
                              : 'top'
                          }
                        ></div>
                        <div
                          onClick={(e) => this.tabqh2(e, index)}
                          className={
                            this.state.active2 == index
                              ? this.state.show === 1
                                ? 'bottom y'
                                : 'bottom'
                              : 'bottom'
                          }
                        ></div>
                      </div>
                    </li>
                  )
                })}
              </ul>
            </div>
          </div>
          {/* 展示区域 */}
          <div className={this.state.acyive === 0 ? 'xianshi' : 'yincang'}>
            <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
              1
            </div>
            <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
              1上
            </div>
            <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
              1下
            </div>
          </div>
          <div className={this.state.acyive === 1 ? 'xianshi' : 'yincang'}>
            <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
              2
            </div>
            <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
              2上
            </div>
            <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
              2 下
            </div>
          </div>
          <div className={this.state.acyive === 2 ? 'xianshi' : 'yincang'}>
            <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
              3
            </div>
            <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
              3 上
            </div>
            <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
              3 下
            </div>
          </div>
          <div className={this.state.acyive === 3 ? 'xianshi' : 'yincang'}>
            <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
              4
            </div>
            <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
              4 上
            </div>
            <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
              4 下
            </div>
          </div>
          {/* 结束 */}
        </div>

        {/* 选项卡 */}
      </div>
    )
  }
}

export default serach

引入sass

.lxf_serach{
  // top条
  .lxf_serach_top{
    width: 100%;
    height: rm(133/3);
    background: #2ed8c4;
    .lxf_serach_top_centent{
      box-sizing: content-box;
    padding-left: rm(40/3);
    padding-right: rm(40/3);
    padding-top: rm(30/3);
    .lxf_serach_top_centent_nei{
      width: 100%;
      height: rm(80/3);
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left{
        width: rm(80/3);
        height: 100%;
        display: flex;
        align-items: center;
      }
      .center{
        margin-left: rm(20/3);
        width: 100%;
        height: 100%;
        position: relative;
        img{
          position: absolute;
          width: rm(50/3);
          height: rm(50/3);
          top: rm(15/3);
          left: rm(15/3);
        }
        input{
          display: inline-block;
             width: 100%;
             height: 100%;
             border-radius: 20px;
             border: none;
             color: #333333;
        }
      }
      .right{
        margin-left: rm(20/3);
        width: rm(140/3);
        height: 100%;
        display: flex;
        align-items: center;
        span{
          width: rm(120/3);
          height: 100%;
          display: inline-block;
          border: 1px solid #ffffff;
          text-align: center;
          line-height: rm(80/3);
          border-radius: 30px;
          color: white;
          font-size: rm(36/3);
        }
      }
    }
    }
  }
  // 选项卡
  .lxf_serach_xxk{
    width: 100%;
    height: rm(95/3);
    box-shadow: 0px 1px 1px 1px #f5f5f5;
    .lxf_serach_xxk_centen{
      box-sizing: content-box;
      padding-left:rm(40/3) ;
      padding-right: rm(40/3);
      height: 100%;
      .lxf_serach_xxk_centen_qy{
        width: 100%;
        height: 100%;
        ul{
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: space-around;
          list-style: none;
          
          li{
            width: 24%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: rm(40/3);
            color: #cccccc;
           span{
               float: left;
           }
          //  三角形
           .sanjiaoxing_big{
             height: 100%;
             width:  rm(30/3);
             .top{
              margin-top: rm(15/3);
              width: 0;
              height: 0;
              border-left: 3px solid transparent;
              border-right: 3px solid transparent;
              margin-left: rm(6/3);
              border-bottom: 6px solid #f5f5f5;
             }
           .s{
              border-bottom: 6px solid #28d2d1 ;
          
             }
            
             .bottom{
               margin-top: rm(20/3);
              width: 0;
              height: 0;
              border-left: 3px solid transparent;
              border-right: 3px solid transparent;
              border-top: 6px solid white;
              margin-left: rm(6/3);
              border-top: 6px solid #f5f5f5;
             }
             .y{
              border-top: 6px solid #28d2d1;
            }
           }
          }
          .color{
            color: #28d2d1 !important;
          }
        }
      }
    }
  }
  // 选项卡内容区
  .xianshi{
    width: 100%;
    height: 200px;
    background: red;
    display: block;
  }
  .yincang{
    width: 100%;
    height: 200px;
    background: red;
    display: none;
  }
















}

rm是引入了移动端适配通过屏幕大小计算

@charset "UTF-8";
$yh:"Microsoft yahei";
@function rm($px, $base: 14.0625) {
  @return ($px / $base) * 1rem;
}
html {
   font-size: 62.5%; font-family:$yh;
}
body, textarea, input, select, option {
  color: #333;
  font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color:transparent;
}
body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {
    margin:0; padding:0;
}

ol,ul,textarea,input,option,th,td {
    padding:0;
}
.page{
    min-width: 320px;max-width: 750px;margin: 0 auto;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size:100%;
}
a,select,input,textarea{
    outline: none;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
    display: block;
}
table {
    border-collapse:collapse;border-spacing: 0;
}
ul,ol {
    list-style-type:none;
}
.hide {
    display: none;
}
.show {
    display: block;
}
.clearfix:after {
    content:'.';display:block;height:0;clear:both;visibility:hidden;
}
//.clearfix {*zoom:1;}
.clear {
    clear:both;height:0;overflow:hidden;
}
/* ios默认文本框阴影 */
input[type=text],textarea{
    -webkit-appearance:none;
}
/* 低版本安卓文本框层级问题 */
input:focus{
    -webkit-user-modify:read-write-plaintext-only;
}
fieldset, img {
    border: 0;
}
a {
    text-decoration:none;
}
a,textarea,input{
    outline:none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}
textarea {
    overflow:auto;resize:none;
}
// 以下是按照320下12像素字号走的，因为谷歌不识别小于12号字号
@media only screen and (min-width: 320px){
    html {
        font-size: 75%!important; /* 12÷16=75% */
    }
}
/**
    62.5%   10px;
    640 150%    24px;
    320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
    320/640  * 24 / 16 = 75%;
    375/640  * 24 / 16 = 87.89%;
    414/640  * 24 / 16 = 97.03%
*/
@media only screen and (min-width: 360px){
    html {
        font-size: 84.3%!important; /* 13.5÷16=84.3% */
    }
}
@media only screen and (min-width: 375px){
    html {
        font-size: 87.890625%!important; /* 14.0625÷16=87.890625% */
    }
}
@media only screen and (min-width: 384px){
    html {
        font-size: 90%!important; /* 14.4÷16=90% */
    }
}
@media only screen and (min-width: 390px){
    html {
        font-size: 91.4%!important; /* 14.625÷16=91.4% */
    }
}
@media only screen and (min-width: 412px){
    html {
        font-size: 96.56%!important; /* 15.45÷16=96.56% */
    }
}
@media only screen and (min-width: 414px){
    html {
        font-size: 97.03%!important; /* 15.525÷16=97.03% */
    }
}
@media only screen and (min-width: 480px){
    html {
        font-size: 112.5%!important; /* 18÷16=112.5% */
    }
}
@media only screen and (min-width: 560px){
    html {
        font-size: 131.25%!important;/* 21÷16=131.25% */
    }
}
@media only screen and (min-width: 640px){
    html {
        font-size: 150%!important; /* 24÷16=150% */
    }
}
@media only screen and (min-width: 720px){
    html {
        font-size: 168.75%!important; /* 27÷16=168.75% */
    }
}
@media only screen and (min-width: 750px){
    html {
        font-size: 175.78125%!important; /* 28.125÷16=175.78125% */
    }
}
// @media only screen and (min-width: 800px){
//     html {
//         font-size: 187.5%!important; /* 30÷16=146.43% */
//     }
// }
// @media only screen and (min-width: 960px){
//     html {
//         font-size: 225%!important; /* 36÷16=146.43% */
//     }
// }

 

android tab 小三角,自定义实现带三角下标的TabLayout
weixin_35639680的博客
05-28 539
在开发中，我们常常需要ViewPager结合Fragment一起使用，如下图：我们可以使用Design support library库的TabLayout去实现，但是TabLayout只能用横线指示器，如果想要其他指示器，比如三角下标，该控件就不能用了。我们可以找网上成熟的轮子进行修改，比如：PagerSlidingTabStrip实现了一个类似于今日头条的可滑动tab，带三角下标，可绑定Vie...
使用 AntV S2 打造大数据表格组件
weixin_41498276的博客
03-09 6437
本文记录的是在开源软件不足以满足需求，同时商业软件价格高、定制难的情况下，蚂蚁数据智能前端团队是如何基于开源 Canvas 表格渲染库 AntV S2 实现拥有诸多功能的 React 大数据表格组件。
React实现tab选项卡效果
大风起兮云飞扬
02-24 2652
今天在开发过程中，遇到一个问题，有时候我们想要NavLink的active效果,但是并不想做路由跳转，这时候就需要我们自己写功能了，如图所示： 首先，通过绑定事件，并传递一个唯一的参数，然后在className通过三目运算符来判断什么时候该添加active效果 在state中定义一个current值 通过传递过来的唯一参数改变state中current的值 总体来说这个方法实现效果还行，但是...
React实现简易Tab切换案例
weixin_45389051的博客
04-25 1989
说实话，写这个的时候，真是觉得Vue太香了，香的不得了,好吧，不吹vue了???? 第一步还是先创建类组件 class Tab extends React.Component{} 第二步在Tab中开始定义状态 class Tab extends React.Component{ constructor(){ super()//从原型上继承对应的方法和属性,this必须写在super下面...
React实现tab切换
热门推荐
小白变怪兽
03-29 1万+
react tab 切换
Element源码分析系列8-Cascader(级联选择器)
weixin_33836223的博客
08-28 4839
简介 级联选择器，如下图,也是一种常用的组件，这个组件会比较复杂一点 Element中和该组件相关的文件有main.vue和menu.vue2个文件，前者代表输入框部分，后者代表下方的级联选择部分，以及附加的js文件popper.js以及vue.popper.js，用来处理弹出框逻辑，前面文章介绍过，这4个文件总代码量2000行左右，首先要明确，Element中把弹出框的逻辑分离出去了，放在专门...
之之的前端面经整理
z_zhiya的博客
04-20 1569
之之的前端面经整理前言联通（2021-04-15）功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 记录很不厉害的小赵的求职经验 联通（2021-04-15） 技术面照着简历问，问得浅没太深挖，不会的就答不会也没有压力面，时间
带小三角形的tab切换效果实现（css&background）css方法兼容性不够完善
小鱼儿-专注前端开发
09-16 1118
根据块级元素的border表现形式做的三角形,但是发现在IE系列浏览器里面兼容性不够好,后面改用背景图实现,具体相关代码如下: [code="html"] em模拟小三角 *{margin:0;padding:0} body{font:12px/1.5 simsun;color:#000;text-align:center} ul,li{list-style:none...
react----h5拖拽事件实现列表排序及列表切换
Seeyoucm
04-14 2425
h5拖拽事件实现列表排序及列表切换
实现选中或者hover时，倒三角样式
m0_46425990的博客
10-19 334
.search-type:hover, .search-type.active{ background-color:#fff; color:#128bed; padding:5px8px; } .search-type:hover::before, .search-type.active:before{ content:""; width:0; height:0; border-width:6px6px0px; bord...
js table栏切换+border绘制三角形特殊应用
06-05 1636
*{ margin: 0; padding: 0; } body{ width: 100%; height: 100%; background-color: #f6f6f6; } .count{ width: 390px; height: 444px; /*border: 1px
前端知识—tab切换代码讲解
yunduanaoligei的博客
10-11 1291
今天分享下”前端知识—tab切换代码讲解“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 tab切换在新项目中也算得上常见技术性，一般完成tab切换都用js或是jq完成，今日详细介绍二种仅用css完成tab切换方式 ： 方式 一： 原理：根据label标签的关系属性和input的单项选择题种类完成相对应div的表明 1.创建一个类名叫wrap的div作为器皿 2.创建四个label标签，这将做为tab切换项 3.在每
前端常用效果（2）带效果的tab切换
weixin_34319817的博客
06-26 430
先上效果, 代码引用了jquery的框架 复制代码 功能实现比较简单，代码如下所示： html代码如下 <div class='tabchouse'> <!--设置元素位置--> <ul> <!--元素内容--> <li class='act...
前端实现tab栏切换，这么常见的案例你学会了吗？
阿牛的博客
03-31 1万+
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
【前端】Javascript高级篇-tab切换栏（案例1）
瑞新の博客：bennyrhys
06-11 1295
文章目录效果图面向对象实战代码index.htmltab.js一lis绑定点击事件和序号效果图梅花 效果图 面向对象 实战代码 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h4>Js面向对象 tab 动态增加</h4>
React Navigation 导航栏样式调整+底部角标消息提示
marcushbs的博客
10-06 522
五一佳节匆匆而过，有人选择在外面看人山人海，有人选择宅在家中度过五一，也有人依然坚守在第一线，致敬！ 这是坚持学习react-native的第二篇文章，可能会迟到，但是绝不会缺席，这篇要涉及到的是react-navigation，也是rn社区主推的一个导航库。 网上关于react-navigation的基本使用也是一抓一大把，这里对于它的使用不做过多介绍，主要记录使用过程中的其他问题。 因为android 和iOS 手机的不同，导航栏的显示也不太一样，而这篇文章会尽量的配置属性，让两端的导航栏样式...
React中点击选择复选框时下面内容变化
weixin_45778591的博客
04-27 692
React中点击选择复选框时其下面内容变化 选一个： 选一个： 都选： 都不选： 以上就是需求： 我刚开始判断还是不够严谨的，控制的时候没有写清楚，是因为MJ告诉我是怎么控制，又学到一招了啊 因为是复选框，就可以用*length*来进行判断呢 代码来啦： 这就是主要的逻辑呢： handleCheck = (e) => { if(e.length === 0) { this.setState({ flagPerson: false,
css做尖角,css实现尖角div
weixin_30978239的博客
08-04 728
css实现尖角div尖角在上面效果图：代码：[html]尖角div#top{width:400px;height:250px;border:3px solid; /* 边框宽度为3px */position:relative;}.sp1,.sp2{display:block;height:0px;width:0px;position:absolute;font-size:0;line-heig...
React实现淘宝风格tab居中切换效果的代码解析
本文将探讨如何在React中实现一个类似于淘宝网站上的tab居中切换效果。这个效果通常用于导航栏，使得用户能够清晰地看到当前选中的选项，并且选项能够居中显示，增加用户体验。 在React中实现这个功能，我们需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李雪峰吖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值