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

react 实现tab切换三角形筛选样式相关推荐

vant 解决tab切换插件标题样式自定义
解决vant 框架 tab切换插件标题样式不能自定义问题找到源码:node_modules/vant/es/tabs/Title.js 修改如下代码: return h("div" ...
解决dataTable在element下的tab切换时表头与内容错位问题
项目背景基于第三方为layui开发的老项目,在layui基础上使用element的tab栏,切换下使用dataTable出现表头与内容错位,如下图: 解决办法是: // 处理tab切换后列表样式错乱问 ...
Vue.js-Day01-PM【事件绑定(事件传参、事件对象、传参+获取事件对象)、样式处理操作(模板、事件、属性绑定)、Tab切换(原生js实现、Vue.js实现)、js中的this详解关键字】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.事件绑定 4.1.事件绑定(点击.双击.鼠标移动) 点击按钮-最简单的事件绑定(无参函数) 格式点击按钮 ...
React中实现tab切换
代码比较简单,并不复杂 import React, { Component } from "react";class Taball extends Component {const ...
HTML简单的自定义属性制作tab切换
今天做淘宝页面时候碰到一个tab切换如下图所示: 当我鼠标移到第一个tab时候那个小三角形在第一个tab项里移到第二个时候就到了第二个里面这种效果我这里用了个小技巧就是在HTML中自定 ...
HTML第三次作业——Tab切换和轮播图
第一题:完全模仿京东首页的每日特价专栏制作一个Tab切换效果,除了图片大小和图片具体内容不一样外,其它部分要求高仿,即内容部分也要求高仿,即也是由图片和文字的组合构成,最左边也是一张图片. 效果图:代 ...
原生js实现Tab切换
本课标题: Tab切换引入话术: 咱们刚才讲了,碰壁反弹,拖拽盒子,这两个动画,用到了offset系列,client系列,咱们是不是还要计算,对吧,比较麻烦,咱们再讲一个比较简单一点的动画,tab切 ...
微信小程序实现滑动tab切换和点击tab切换并显示相应的数据（附源代码）
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图: 这里主要用到了swiper组件和三目运算,直接上代码, 样式只有三个class,简单粗暴 ...
javascript tab切换类LixTabs最新版
javascript Tab切换类LixTabs,更新至0.5版: 受snandy的"读jquery"系列的启发,改进了代码,现在调用LixTabs时不用加new了.即可以这样写: ...

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

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

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

引入sass

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

react 实现tab切换三角形筛选样式相关推荐

最新文章

热门文章

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

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

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

引入sass

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

react 实现tab切换 三角形筛选样式相关推荐

最新文章

热门文章

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

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

react 实现tab切换三角形筛选样式相关推荐