const label = {
lettersort: false,
paramname: "label",
paramid: 0,
title: "车源列表筛选项",
option: [{
value: 1,
text: "全部"
},
{
value: 2,
text: "本地求购"
},
{
value: 3,
text: "精准收车"
},
{
value: 4,
text: "全国收车"
},
{
value: 5,
text: "同行询价"
},
{
value: 6,
text: "可批可售"
},
{
value: 7,
text: "车抵贷款"
},
{
value: 8,
text: "消费贷款"
},
{
value: 9,
text: "商家库容"
},
{
value: 10,
text: "代理合作"
},
{
value: 11,
text: "过户转籍"
},
{
value: 12,
text: "寻车拖车"
},
{
value: 13,
text: "解压抵押"
},
{
value: 14,
text: "抵押核验"
}
]
}
filterDom = () => {
let filterJson = label;
let arr = filterJson.option;
return (
<div ref="filterBar" className="filter-list">
{arr.map((item, index) => {
if (item.value == this.state.filterSelect) {
return (
<div
ref={item.value}
className="filter-item active"
key={index}
value={item.value}>
{item.text}
<div className="zhishi"></div>
</div>
);
} else {
return (
<div
className="filter-item"
onClick={() => {
this.filterBarClick(item);
}}
ref={item.value}
key={index}
value={item.value}>
{item.text}
</div>
);
}
})}
</div>
);
};
render(){
return(
<div>
...
<div className="filter-content" style={{ display: this.state.filterBarShow }}>
{this.filterDom()}
<div className="shadow"></div>
{/* 按钮和占位 */}
<div
className="filte-btn-content"
onClick={() => {
this.filterBtnClick();
}}>
<div className="filte-btn"></div>
</div>
</div>
...
</div>
)
}
scss样式表
.filter {
width: 100%;
// position: fixed;
}
.filter-content {
overflow: hidden;
padding-right: pxToRem(27px);
position: relative;
background: #fff;
.filter-list {
display: flex;
overflow-x: auto;
justify-content: space-between;
height: pxToRem(90px);
color: #333333;
align-items: center;
-webkit-overflow-scrolling: touch;
font-size: pxToRem(32px);
font-family:PingFangSC-Light,PingFang SC;
font-weight:300;
background: #fff;
margin-right: pxToRem(100px);
.filter-item {
text-align: center;
display: flex;
// flex-basis: 17px;
flex-shrink: 0;
white-space: nowrap;
padding: 0 pxToRem(25px);
background: #fff;
height: pxToRem(90px);
align-items: center;
justify-content: center;
}
.active{
font-size: pxToRem(36px);
font-weight: 600;
height: pxToRem(90px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex: 1;
flex-direction: column;
}
.zhishi{
background: url("./../img/zhishi.png");
background-repeat: no-repeat;
background-size: 100%;
width: pxToRem(25px);
height: pxToRem(6px);
position: absolute;
bottom: pxToRem(10px);;
left: 50%;
transform: translate(-50%, 0);
z-index: 999;
}
}
.shadow{
height: pxToRem(90px);
width: pxToRem(133px);
position: absolute;
right: pxToRem(101px);
top: 0;
background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.14) 100%);
pointer-events: none;
}
.filte-btn{
background: url("./../img/shaixuan.png");
background-repeat: no-repeat;
background-size: 100%;
width: pxToRem(40px);
height: pxToRem(40px);
}
.filte-btn-content {
height: pxToRem(90px);
position: absolute;
right: pxToRem(27px);
top: 0;
background: #fff;
width: pxToRem(74px);
display: flex;
align-items: center;
justify-content: flex-end;
}
}
想要居中展示首先是需要找到中心点,然后在点击是计算偏移量,把对应的标签滚动到中心位置
filterBarClick = param => {
const { value, text } = param;
this.setState({
filterSelect: value
});
let dom = this.refs;
//获取点击时当前标签的DOM
let valDom = dom[value];
//获取标签父元素DOM
let contentDom = dom.filterBar;
//计算当前标签到最左侧的宽度
let valLeft = valDom.offsetLeft;
//计算当前标签本身的宽度
let valWidth = valDom.clientWidth;
//当前标签中心点到最左侧的距离
let valCenter = valLeft + valWidth / 2;
//可视屏幕宽度
let clientWidth = document.querySelector('body').offsetWidth;
//可视屏幕中心点(减去的30是列表两边的15像素的留白)
let center = (clientWidth - 30) / 2;
//计算当前标签中心点和屏幕中心点的偏移量 然后滚动相应的距离
if (valCenter > center) {
contentDom.scrollTo({
left: valCenter - center,
behavior: 'smooth'
});
} else {
contentDom.scrollTo({
left: 0,
behavior: 'smooth'
});
}
};
默认状态,第一个选项卡被选中,展示第一个选项卡的内容;策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为none;选项卡模块:被点击的变为红底白字,其他的变为白底红字
在使用Echart3的时候只要在切换tab的时候,重新初始化和setOption图表就会显示,但是Echart4的时候这样操作图表并不显示,无意间resize窗口,这时图表就显示了。切换窗口的时候除了执行重新初始化和setOption之外
相信tab切换对于大家来说都不算陌生,后台管理系统中多会用到。如果不知道的话,可以看一下浏览器上方的标签页切换,大概效果就是这样。
不同tab的js执行环境是不同的,因此变量不会共享,watcher也不会互相影响。可以利用 storage事件监控localstorge的变化 ,storege事件只能注册在window上
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!