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="" /><inputtype="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 (<lionClick={() => this.tab(index)}key={index}className={this.state.acyive == index ? 'color' : ''}><span>{item}</span>{/* 三角形 */}<div className="sanjiaoxing_big"><divonClick={(e) => this.tabqh(e, index)}className={this.state.active2 == index? this.state.show === 0? 'top s': 'top': 'top'}></div><divonClick={(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 根据基数16320/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% *///}// }