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% */
//     }
// }