React實現類似淘寶tab居中切換效果的示例程式碼
阿新 • • 發佈:2020-06-03
效果
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,1) 0%,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居中切換內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!