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% */
// }
// }
react 实现tab切换 三角形筛选样式的更多相关文章
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- easyui easyui-accordion的使用和在tab切换时没有样式
1.easyui-accordion的使用 <div id="aa" class="easyui-accordion" style="width ...
- react实现tab切换效果
...this.state = { // 全部数据 addressJobs: [ { address: '北京', jobs: ['北京职位1', '北京职位2', '北京职位3', '北京职位4', ...
- jQuery带tab切换搜索框样式代码
效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...
- react简单的tab切换 (styled-components)
其实,在我们日常的编程当中,经常会碰到tab切换的模块,那么,实现他的方法也有很多中,下面是一款简单,容易理解的react tab切换方法. 通过设置state中的current 属性去控制tab 和 ...
- react实现的tab切换组件
我有点想要吐槽,因为用原生的js实现起来挺简单的一个小东西,改用react来写却花了我不少时间,也许react的写法只有在复杂的web应用中才能体现出它的优势吧!不过吐槽归吐槽,对react这种优雅的 ...
- DIV+CSS 样式简单布局Tab 切换
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...
- AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换
一.Flutter AppBar 自定义顶部按钮图标.颜色 leading 在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title 标题,通常显示为当 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- vue简单语法梳理
小图不够清楚,可以点击大图查看.
- CSP-S2021 被碾压记
没啥好说的,不会 T3 这种贪心/dk,或者说我的贪心能力太拉跨导致 T3 这种基本的贪心都不会. 只能说,还好 CSP 不算省选.自爆了,根本没心情写游记. 希望大家不要因为我这次的失误而瞧不起我这 ...
- 洛谷 P6060 - [加油武汉]传染病研究（数论）
洛谷题面传送门 一道不算太难的题,题解稍微写写吧( 首先根据约数个数和公式,对于一个 \(n=p_1^{\alpha_1}·p_2^{\alpha_2}·\cdots·p_m^{\alpha_m}\) ...
- Codeforces 536D - Tavas in Kansas（dp）
Codeforces 题目传送门 & 洛谷题目传送门 其实这题本该 2019 年 12 月就 AC 的(详情请见 ycx 发此题题解的时间),然鹅鸽到了现在-- 首先以 \(s,t\) 分别为 ...
- WC 2007 剪刀石头布
WC 2007 剪刀石头布 看到这个三元环的问题很容易可以考虑到求不合法的三元环的数量的最小值. 什么情况不合法?既然不合法,当且仅当三元环中有一个人赢了另外两个人.所以我们考虑对于一个人而言,如果她 ...
- R语言与医学统计图形-【33】生存曲线、森林图、曼哈顿图
1.生存曲线 基础包survival+扩展包survminer. survival包内置肺癌数据集lung. library(survival) library(survminer) str(lung ...
- mysql-select as
给查询对象起个别名. 把查询对像起个别名的作用. select ID as 用户ID,Name as 用户名 from Table_user
- zabbix 集成cloud alert
1. 了解 Cloud Alert 通过应用,接入监控系统/平台的告警,集中管理您的告警,统一分派通知,统一分析.这个平台最先了解和使用是在 2017 年下半年,之前的名称叫 oneits ...
- Redis - 1 - linux中使用docker-compose安装Redis - 更新完毕
0.前言 有我联系方式的那些半吊子的人私信问我:安装Redis有没有更简单的方式,网上那些文章和视频,没找到满意的方法,所以我搞篇博客出来说明一下我的安装方式吧 1.准备工作 保证自己的linux中已 ...
- Flume(二)【入门】
目录 一.安装部署 1.安装地址 2.安装步骤 二.入门案例 1.官方案例(nestat->logger) 2.实时监控单个追加文件(exec->hdfs) 3.实时监控目录下多个新文件( ...