​

​

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

  1. import React, { Component } from 'react'
  2. import { LeftOutline, SearchOutline } from 'antd-mobile-icons'
  3. import { NavLink } from 'react-router-dom'
  4. class serach extends Component {
  5.   constructor(props) {
  6.     super(props)
  7.     this.state = {
  8.       sousuo: '',
  9.       // tab 数据渲染
  10.       lis: ['发布时间', '产品价格', '收藏量', '评论量'],
  11.       // tab切换默认标识
  12.       acyive: 0,
  13.       // 定义空字符串 不点击 不高亮
  14.       active2: '',
  15.       // 定义空字符串 不点击 不显示
  16.       show: '',
  17.     }
  18.   }
  19.   // 获取seach值
  20.   seacrsh = (e) => {
  21.     this.setState({
  22.       sousuo: e.target.value,
  23.     })
  24.   }
  25.   // 函数结束
  26.   tab = (index) => {
  27.     console.log(index)
  28.     this.setState({
  29.       acyive: index,
  30.       show: '',
  31.     })
  32.   }
  33.   // 切换内部  下面三角形点击函数
  34.   // 判断切换 如果点击了内部 触发了冒泡可以用e.stopPropagation()解决,在此需要判断如果没有点击tab 就点击了tab内的上下三角形筛选 就需要 改变tab acyive 标识
  35.   tabqh2 = (e, index) => {
  36.     e.stopPropagation()
  37.     if (index == 0) {
  38.       this.setState({
  39.         acyive: 0,
  40.       })
  41.     } else if (index == 1) {
  42.       this.setState({
  43.         acyive: 1,
  44.       })
  45.     } else if (index == 2) {
  46.       this.setState({
  47.         acyive: 2,
  48.       })
  49.     } else {
  50.       this.setState({
  51.         acyive: 3,
  52.       })
  53.     }
  54.     console.log(index)
  55.  
  56.     console.log(this.state.acyive)
  57.     this.setState({
  58.       active2: index,
  59.       show: 1,
  60.     })
  61.   }
  62.   // 上面三角形点击点击函数
  63.   tabqh = (e, index) => {
  64.     e.stopPropagation()
  65.     console.log(index)
  66.     if (index == 0) {
  67.       this.setState({
  68.         acyive: 0,
  69.       })
  70.     } else if (index == 1) {
  71.       this.setState({
  72.         acyive: 1,
  73.       })
  74.     } else if (index == 2) {
  75.       this.setState({
  76.         acyive: 2,
  77.       })
  78.     } else {
  79.       this.setState({
  80.         acyive: 3,
  81.       })
  82.     }
  83.     console.log(this.state.acyive)
  84.     this.setState({
  85.       active2: index,
  86.       show: 0,
  87.     })
  88.   }
  89.  
  90.   render() {
  91.     return (
  92.       <div className="lxf_serach">
  93.         {/* top */}
  94.         <div className="lxf_serach_top">
  95.           <div className="lxf_serach_top_centent">
  96.             <div className="lxf_serach_top_centent_nei">
  97.               <div className="left">
  98.                 <NavLink to="">
  99.                   <LeftOutline fontSize={20} color="white" />
  100.                 </NavLink>
  101.               </div>
  102.               <div className="center">
  103.                 <img src={require('../lxf/imger/sousuo.png')} alt="" />
  104.                 <input
  105.                   type="text"
  106.                   placeholder="请搜索"
  107.                   onChange={this.seacrsh}
  108.                   style={{ textIndent: '30px' }}
  109.                 />
  110.               </div>
  111.               <div className="right">
  112.                 <span>搜索</span>
  113.               </div>
  114.             </div>
  115.           </div>
  116.         </div>
  117.         {/* /top */}
  118.         {/*选项卡  */}
  119.         <div className="lxf_serach_xxk">
  120.           <div className="lxf_serach_xxk_centen">
  121.             <div className="lxf_serach_xxk_centen_qy">
  122.               <ul>
  123.                 {this.state.lis.map((item, index) => {
  124.                   return (
  125.                     <li
  126.                       onClick={() => this.tab(index)}
  127.                       key={index}
  128.                       className={this.state.acyive == index ? 'color' : ''}
  129.                     >
  130.                       <span>{item}</span>
  131.                       {/* 三角形 */}
  132.                       <div className="sanjiaoxing_big">
  133.                         <div
  134.                           onClick={(e) => this.tabqh(e, index)}
  135.                           className={
  136.                             this.state.active2 == index
  137.                               ? this.state.show === 0
  138.                                 ? 'top s'
  139.                                 : 'top'
  140.                               : 'top'
  141.                           }
  142.                         ></div>
  143.                         <div
  144.                           onClick={(e) => this.tabqh2(e, index)}
  145.                           className={
  146.                             this.state.active2 == index
  147.                               ? this.state.show === 1
  148.                                 ? 'bottom y'
  149.                                 : 'bottom'
  150.                               : 'bottom'
  151.                           }
  152.                         ></div>
  153.                       </div>
  154.                     </li>
  155.                   )
  156.                 })}
  157.               </ul>
  158.             </div>
  159.           </div>
  160.           {/* 展示区域 */}
  161.           <div className={this.state.acyive === 0 ? 'xianshi' : 'yincang'}>
  162.             <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
  163.               1
  164.             </div>
  165.             <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
  166.               1上
  167.             </div>
  168.             <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
  169.               1下
  170.             </div>
  171.           </div>
  172.           <div className={this.state.acyive === 1 ? 'xianshi' : 'yincang'}>
  173.             <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
  174.               2
  175.             </div>
  176.             <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
  177.               2上
  178.             </div>
  179.             <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
  180.               2 下
  181.             </div>
  182.           </div>
  183.           <div className={this.state.acyive === 2 ? 'xianshi' : 'yincang'}>
  184.             <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
  185.               3
  186.             </div>
  187.             <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
  188.               3 上
  189.             </div>
  190.             <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
  191.               3 下
  192.             </div>
  193.           </div>
  194.           <div className={this.state.acyive === 3 ? 'xianshi' : 'yincang'}>
  195.             <div className={this.state.show === '' ? 'xianshi' : 'yincang'}>
  196.               4
  197.             </div>
  198.             <div className={this.state.show === 0 ? 'xianshi' : 'yincang'}>
  199.               4 上
  200.             </div>
  201.             <div className={this.state.show === 1 ? 'xianshi' : 'yincang'}>
  202.               4 下
  203.             </div>
  204.           </div>
  205.           {/* 结束 */}
  206.         </div>
  207.  
  208.         {/* 选项卡 */}
  209.       </div>
  210.     )
  211.   }
  212. }
  213.  
  214. export default serach

​引入sass

​

  1. .lxf_serach{
  2.   // top条
  3.   .lxf_serach_top{
  4.     width: 100%;
  5.     height: rm(133/3);
  6.     background: #2ed8c4;
  7.     .lxf_serach_top_centent{
  8.       box-sizing: content-box;
  9.     padding-left: rm(40/3);
  10.     padding-right: rm(40/3);
  11.     padding-top: rm(30/3);
  12.     .lxf_serach_top_centent_nei{
  13.       width: 100%;
  14.       height: rm(80/3);
  15.       display: flex;
  16.       justify-content: space-between;
  17.       align-items: center;
  18.       .left{
  19.         width: rm(80/3);
  20.         height: 100%;
  21.         display: flex;
  22.         align-items: center;
  23.       }
  24.       .center{
  25.         margin-left: rm(20/3);
  26.         width: 100%;
  27.         height: 100%;
  28.         position: relative;
  29.         img{
  30.           position: absolute;
  31.           width: rm(50/3);
  32.           height: rm(50/3);
  33.           top: rm(15/3);
  34.           left: rm(15/3);
  35.         }
  36.         input{
  37.           display: inline-block;
  38.              width: 100%;
  39.              height: 100%;
  40.              border-radius: 20px;
  41.              border: none;
  42.              color: #333333;
  43.         }
  44.       }
  45.       .right{
  46.         margin-left: rm(20/3);
  47.         width: rm(140/3);
  48.         height: 100%;
  49.         display: flex;
  50.         align-items: center;
  51.         span{
  52.           width: rm(120/3);
  53.           height: 100%;
  54.           display: inline-block;
  55.           border: 1px solid #ffffff;
  56.           text-align: center;
  57.           line-height: rm(80/3);
  58.           border-radius: 30px;
  59.           color: white;
  60.           font-size: rm(36/3);
  61.         }
  62.       }
  63.     }
  64.     }
  65.   }
  66.   // 选项卡
  67.   .lxf_serach_xxk{
  68.     width: 100%;
  69.     height: rm(95/3);
  70.     box-shadow: 0px 1px 1px 1px #f5f5f5;
  71.     .lxf_serach_xxk_centen{
  72.       box-sizing: content-box;
  73.       padding-left:rm(40/3) ;
  74.       padding-right: rm(40/3);
  75.       height: 100%;
  76.       .lxf_serach_xxk_centen_qy{
  77.         width: 100%;
  78.         height: 100%;
  79.         ul{
  80.           width: 100%;
  81.           height: 100%;
  82.           display: flex;
  83.           justify-content: space-around;
  84.           list-style: none;
  85.  
  86.           li{
  87.             width: 24%;
  88.             height: 100%;
  89.             display: flex;
  90.             align-items: center;
  91.             justify-content: center;
  92.             font-size: rm(40/3);
  93.             color: #cccccc;
  94.            span{
  95.                float: left;
  96.            }
  97.           //  三角形
  98.            .sanjiaoxing_big{
  99.              height: 100%;
  100.              width:  rm(30/3);
  101.              .top{
  102.               margin-top: rm(15/3);
  103.               width: 0;
  104.               height: 0;
  105.               border-left: 3px solid transparent;
  106.               border-right: 3px solid transparent;
  107.               margin-left: rm(6/3);
  108.               border-bottom: 6px solid #f5f5f5;
  109.              }
  110.            .s{
  111.               border-bottom: 6px solid #28d2d1 ;
  112.  
  113.              }
  114.  
  115.              .bottom{
  116.                margin-top: rm(20/3);
  117.               width: 0;
  118.               height: 0;
  119.               border-left: 3px solid transparent;
  120.               border-right: 3px solid transparent;
  121.               border-top: 6px solid white;
  122.               margin-left: rm(6/3);
  123.               border-top: 6px solid #f5f5f5;
  124.              }
  125.              .y{
  126.               border-top: 6px solid #28d2d1;
  127.             }
  128.            }
  129.           }
  130.           .color{
  131.             color: #28d2d1 !important;
  132.           }
  133.         }
  134.       }
  135.     }
  136.   }
  137.   // 选项卡内容区
  138.   .xianshi{
  139.     width: 100%;
  140.     height: 200px;
  141.     background: red;
  142.     display: block;
  143.   }
  144.   .yincang{
  145.     width: 100%;
  146.     height: 200px;
  147.     background: red;
  148.     display: none;
  149.   }
  150.  
  151. }

　　

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

  1. @charset "UTF-8";
  2. $yh:"Microsoft yahei";
  3. @function rm($px, $base: 14.0625) {
  4.   @return ($px / $base) * 1rem;
  5. }
  6. html {
  7.    font-size: 62.5%; font-family:$yh;
  8. }
  9. body, textarea, input, select, option {
  10.   color: #333;
  11.   font-family: "Hiragino Sans GB", "Microsoft Yahei", tahoma, arial, sans-serif;
  12.   -webkit-font-smoothing: antialiased;
  13.   -webkit-tap-highlight-color:transparent;
  14. }
  15. body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {
  16.     margin:0; padding:0;
  17. }
  18.  
  19. ol,ul,textarea,input,option,th,td {
  20.     padding:0;
  21. }
  22. .page{
  23.     min-width: 320px;max-width: 750px;margin: 0 auto;
  24. }
  25. h1,h2,h3,h4,h5,h6 {
  26.     font-weight: normal;
  27.     font-size:100%;
  28. }
  29. a,select,input,textarea{
  30.     outline: none;
  31. }
  32. article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  33.     display: block;
  34. }
  35. table {
  36.     border-collapse:collapse;border-spacing: 0;
  37. }
  38. ul,ol {
  39.     list-style-type:none;
  40. }
  41. .hide {
  42.     display: none;
  43. }
  44. .show {
  45.     display: block;
  46. }
  47. .clearfix:after {
  48.     content:'.';display:block;height:0;clear:both;visibility:hidden;
  49. }
  50. //.clearfix {*zoom:1;}
  51. .clear {
  52.     clear:both;height:0;overflow:hidden;
  53. }
  54. /* ios默认文本框阴影 */
  55. input[type=text],textarea{
  56.     -webkit-appearance:none;
  57. }
  58. /* 低版本安卓文本框层级问题 */
  59. input:focus{
  60.     -webkit-user-modify:read-write-plaintext-only;
  61. }
  62. fieldset, img {
  63.     border: 0;
  64. }
  65. a {
  66.     text-decoration:none;
  67. }
  68. a,textarea,input{
  69.     outline:none;
  70. }
  71. blockquote, q {
  72.     quotes: none;
  73. }
  74. blockquote:before, blockquote:after, q:before, q:after {
  75.   content: '';
  76.   content: none;
  77. }
  78. textarea {
  79.     overflow:auto;resize:none;
  80. }
  81. // 以下是按照320下12像素字号走的，因为谷歌不识别小于12号字号
  82. @media only screen and (min-width: 320px){
  83.     html {
  84.         font-size: 75%!important; /* 12÷16=75% */
  85.     }
  86. }
  87. /**
  88.     62.5%   10px;
  89.     640 150%    24px;
  90.     320除以标准比例 640  再乘以 640的基数24  再除以  HTML 根据基数16
  91.     320/640  * 24 / 16 = 75%;
  92.     375/640  * 24 / 16 = 87.89%;
  93.     414/640  * 24 / 16 = 97.03%
  94. */
  95. @media only screen and (min-width: 360px){
  96.     html {
  97.         font-size: 84.3%!important; /* 13.5÷16=84.3% */
  98.     }
  99. }
  100. @media only screen and (min-width: 375px){
  101.     html {
  102.         font-size: 87.890625%!important; /* 14.0625÷16=87.890625% */
  103.     }
  104. }
  105. @media only screen and (min-width: 384px){
  106.     html {
  107.         font-size: 90%!important; /* 14.4÷16=90% */
  108.     }
  109. }
  110. @media only screen and (min-width: 390px){
  111.     html {
  112.         font-size: 91.4%!important; /* 14.625÷16=91.4% */
  113.     }
  114. }
  115. @media only screen and (min-width: 412px){
  116.     html {
  117.         font-size: 96.56%!important; /* 15.45÷16=96.56% */
  118.     }
  119. }
  120. @media only screen and (min-width: 414px){
  121.     html {
  122.         font-size: 97.03%!important; /* 15.525÷16=97.03% */
  123.     }
  124. }
  125. @media only screen and (min-width: 480px){
  126.     html {
  127.         font-size: 112.5%!important; /* 18÷16=112.5% */
  128.     }
  129. }
  130. @media only screen and (min-width: 560px){
  131.     html {
  132.         font-size: 131.25%!important;/* 21÷16=131.25% */
  133.     }
  134. }
  135. @media only screen and (min-width: 640px){
  136.     html {
  137.         font-size: 150%!important; /* 24÷16=150% */
  138.     }
  139. }
  140. @media only screen and (min-width: 720px){
  141.     html {
  142.         font-size: 168.75%!important; /* 27÷16=168.75% */
  143.     }
  144. }
  145. @media only screen and (min-width: 750px){
  146.     html {
  147.         font-size: 175.78125%!important; /* 28.125÷16=175.78125% */
  148.     }
  149. }
  150. // @media only screen and (min-width: 800px){
  151. //     html {
  152. //         font-size: 187.5%!important; /* 30÷16=146.43% */
  153. //     }
  154. // }
  155. // @media only screen and (min-width: 960px){
  156. //     html {
  157. //         font-size: 225%!important; /* 36÷16=146.43% */
  158. //     }
  159. // }

　　

react 实现tab切换 三角形筛选样式的更多相关文章

  1. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  2. easyui easyui-accordion的使用和在tab切换时没有样式

    1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...

  3. react实现tab切换效果

    ...this.state = { // 全部数据 addressJobs: [ { address: '北京', jobs: ['北京职位1', '北京职位2', '北京职位3', '北京职位4', ...

  4. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  5. react简单的tab切换 (styled-components)

    其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...

  6. react实现的tab切换组件

    我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...

  7. DIV+CSS 样式简单布局Tab 切换

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  8. AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换

    一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当 ...

  9. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. [NOIP2017 提高组] 宝藏

    考虑到这种对于某种操作顺序有一个权值. 且这个权值有一个\(O(n)\)或者更好的复杂度求出. 求最值. 那可以用模拟退火. #include<iostream> #include< ...

  2. Codeforces 643G - Choosing Ads（线段树）

    Codeforces 题目传送门 & 洛谷题目传送门 首先考虑 \(p>50\) 的时候怎么处理,也就是求一个区间的绝对众数.我们知道众数这个东西是不能用线段树直接维护的,因为对于区间 ...

  3. SAM 做题笔记（各种技巧，持续更新，SA）

    SAM 感性瞎扯. 这里是 SAM 做题笔记. 本来是在一篇随笔里面,然后 Latex 太多加载不过来就分成了两篇. 标 * 的是推荐一做的题目. trick 是我总结的技巧. I. P3804 [模 ...

  4. .NET6控制台程序使用quartz.net

    1.新建一个名为"ConsoleQuartz"的.NET6控制台程序. 2.nuget中安装Quartz和Quartz.Plugins,这2个DLL. 3.新建一个HelloQua ...

  5. Python使用print打印时，展示内容不换行

    原理 Python的print()函数中参数end='' 默认为\n,所以会自动换行; 默认的print()函数: print(end='\n') 方案 Python 2: 在print语句的末尾加上 ...

  6. 【GS文献】从家畜到植物，通过基因组选择提高遗传增益

    目录 说明 1.前言 2.植物GS瓶颈 3.提高GS预测的准确性 4.GS与现代育种技术结合 5.GS开源育种网络 说明 Enhancing Genetic Gain through Genomic ...

  7. Xshell初步设置

    目录 双击复制,右击粘贴 双击复制全路径 复制窗口:双击窗口 编码:设置utf-8 外观设置: 窗口化文件传输 vim中使用鼠标点击移动 隐藏/出现菜单栏 ctrl+鼠标控制字体大小 alt+O 弹出 ...

  8. SQL-增、删、改操作

    #查看表 select * from `竟企区域数据分析` #在表第一列新增名为"年月"的列alter table `竟企区域数据分析` add column 年月 varchar ...

  9. 巩固javaweb的第二十七天

    巩固内容 正则表达式: 5. 指定字符串的开始和结尾 正则表达式中字符串的开始和结束符如表 2.6 所示. 表 2.6 开 始 和 结 尾 字符 作 用 ^ 指定以某个字符串开始 $ 指定以某个字符串 ...

  10. hadoop-uber作业模式

    如果作业很小,就选择和自己在同一个JVM上运行任务,与在一个节点上顺序运行这些任务相比,当application master 判断在新的容器中的分配和运行任务的开销大于并行运行它们的开销时,就会发生 ...