飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • UEditor使用文档
  • AngularJS教程
  • ThinkPHP5.0教程

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

时间：2021-12-25  作者：xfswy  

​

​

这次使用的是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)
    域名e = {
      sousuo: \'\',
      // tab 数据渲染
      lis: [\'发布时间\', \'产品价格\', \'收藏量\', \'评论量\'],
      // tab切换默认标识
      acyive: 0,
      // 定义空字符串 不点击 不高亮
      active2: \'\',
      // 定义空字符串 不点击 不显示
      show: \'\',
    }
  }
  // 获取seach值
  seacrsh = (e) => {
    域名tate({
      sousuo: 域名e,
    })
  }
  // 函数结束
  tab = (index) => {
    域名(index)
    域名tate({
      acyive: index,
      show: \'\',
    })
  }
  // 切换内部  下面三角形点击函数
  // 判断切换 如果点击了内部 触发了冒泡可以用域名Propagation()解决,在此需要判断如果没有点击tab 就点击了tab内的上下三角形筛选 就需要 改变tab acyive 标识
  tabqh2 = (e, index) => {
    域名Propagation()
    if (index == 0) {
      域名tate({
        acyive: 0,
      })
    } else if (index == 1) {
      域名tate({
        acyive: 1,
      })
    } else if (index == 2) {
      域名tate({
        acyive: 2,
      })
    } else {
      域名tate({
        acyive: 3,
      })
    }
    域名(index)

    域名(域名ve)
    域名tate({
      active2: index,
      show: 1,
    })
  }
  // 上面三角形点击点击函数
  tabqh = (e, index) => {
    域名Propagation()
    域名(index)
    if (index == 0) {
      域名tate({
        acyive: 0,
      })
    } else if (index == 1) {
      域名tate({
        acyive: 1,
      })
    } else if (index == 2) {
      域名tate({
        acyive: 2,
      })
    } else {
      域名tate({
        acyive: 3,
      })
    }
    域名(域名ve)
    域名tate({
      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/域名\')} alt="" />
                <input
                  type="text"
                  placeholder="请搜索"
                  onChange={域名rsh}
                  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>
                {域名.map((item, index) => {
                  return (
                    <li
                      onClick={() => 域名(index)}
                      key={index}
                      className={域名ve == index ? \'color\' : \'\'}
                    >
                      <span>{item}</span>
                      {/* 三角形 */}
                      <div className="sanjiaoxing_big">
                        <div
                          onClick={(e) => 域名h(e, index)}
                          className={
                            域名ve2 == index
                              ? 域名 === 0
                                ? \'top s\'
                                : \'top\'
                              : \'top\'
                          }
                        ></div>
                        <div
                          onClick={(e) => 域名h2(e, index)}
                          className={
                            域名ve2 == index
                              ? 域名 === 1
                                ? \'bottom y\'
                                : \'bottom\'
                              : \'bottom\'
                          }
                        ></div>
                      </div>
                    </li>
                  )
                })}
              </ul>
            </div>
          </div>
          {/* 展示区域 */}
          <div className={域名ve === 0 ? \'xianshi\' : \'yincang\'}>
            <div className={域名 === \'\' ? \'xianshi\' : \'yincang\'}>
              1
            </div>
            <div className={域名 === 0 ? \'xianshi\' : \'yincang\'}>
              1上
            </div>
            <div className={域名 === 1 ? \'xianshi\' : \'yincang\'}>
              1下
            </div>
          </div>
          <div className={域名ve === 1 ? \'xianshi\' : \'yincang\'}>
            <div className={域名 === \'\' ? \'xianshi\' : \'yincang\'}>
              2
            </div>
            <div className={域名 === 0 ? \'xianshi\' : \'yincang\'}>
              2上
            </div>
            <div className={域名 === 1 ? \'xianshi\' : \'yincang\'}>
              2 下
            </div>
          </div>
          <div className={域名ve === 2 ? \'xianshi\' : \'yincang\'}>
            <div className={域名 === \'\' ? \'xianshi\' : \'yincang\'}>
              3
            </div>
            <div className={域名 === 0 ? \'xianshi\' : \'yincang\'}>
              3 上
            </div>
            <div className={域名 === 1 ? \'xianshi\' : \'yincang\'}>
              3 下
            </div>
          </div>
          <div className={域名ve === 3 ? \'xianshi\' : \'yincang\'}>
            <div className={域名 === \'\' ? \'xianshi\' : \'yincang\'}>
              4
            </div>
            <div className={域名 === 0 ? \'xianshi\' : \'yincang\'}>
              4 上
            </div>
            <div className={域名 === 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: 域名) {
  @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 = 域名%;
    414/640  * 24 / 16 = 域名%
*/
@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: 域名25%!important; /* 域名÷16=域名25% */
    }
}
@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; /* 域名÷16=91.4% */
    }
}
@media only screen and (min-width: 412px){
    html {
        font-size: 域名%!important; /* 域名÷16=域名% */
    }
}
@media only screen and (min-width: 414px){
    html {
        font-size: 域名%!important; /* 域名÷16=域名% */
    }
}
@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: 域名%!important;/* 21÷16=域名% */
    }
}
@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: 域名%!important; /* 27÷16=域名% */
    }
}
@media only screen and (min-width: 750px){
    html {
        font-size: 域名5%!important; /* 域名÷16=域名5% */
    }
}
// @media only screen and (min-width: 800px){
//     html {
//         font-size: 187.5%!important; /* 30÷16=域名% */
//     }
// }
// @media only screen and (min-width: 960px){
//     html {
//         font-size: 225%!important; /* 36÷16=域名% */
//     }
// }

　　

标签：编程
搜你所爱
大家在看
热搜标签
网站地图 | 注册 | 投稿
白菜窝
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络，如有侵权，请联系删除。