时间:2021-05-26
效果
DOM布局
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' }); } };总结
到此这篇关于React实现类似淘宝tab居中切换效果的文章就介绍到这了,更多相关react tab居中切换内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下:组件内默认onClick事件触发函数actionClick,是不带参数的,不带
先来看看效果图CSS3伪类target利用target的特性,可以实现纯css的tab效果切换示例代码如下复制代码代码如下:.tabmenu{position:
本文实例讲述了jQuery实现tab标签自动切换的方法。分享给大家供大家参考。具体实现方法如下:复制代码代码如下:jQuery实现的tab标签自动切换效果*{m
直接先来个真相吧:【HTML代码】tab1tab2tab3这是TAB切换效果区域1这是TAB切换效果区域2这是TAB切换效果区域3【js】/***tabs*@a
本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下效果展示:源码展示:js实现tab栏切换*{margin:0;margin:0;