### 點擊tab欄，滑動到指定的位置 ``` uni.createSelectorQuery().select(".evaluate-data").boundingClientRect((data) => { // data - 各種參數 uni.pageScrollTo({ scrollTop: this.PageScrollTop + data.top - 50, // 當前距離頂部的位置加上 + 當前距離目標 - tab欄高度 duration: 300 //延遲時間 }); }).exec() ``` ### 子組件的彈框滾動條不影響父元素滾動 ``` beforeCreate () { document.querySelector('body').setAttribute('style', 'overflow:hidden') }, beforeDestroy () { document.querySelector('body').removeAttribute('style') } ``` **使用**：這里的調用方式隨自己的代碼設計調用，不一定是這兩個鉤子函數 **優點**：開啟和關閉彈窗時，主頁面位置不會改變 **注意**：好像就web端有效 ### scroll-view雙向聯動 > 在請求數據的時候得到數據高度 ``` this.$nextTick(() => { setTimeout(() => { this.setScrollHeight(); }, 1500); }); ``` ``` setScrollHeight() { let h = 0; const query = uni.createSelectorQuery(); query.selectAll('.goods-item').boundingClientRect().exec((res) => { res[0].forEach((item) => { h += item.height; this.goodsHeight.push(h); }) }); this.menuHeight = []; let m = 0; query.select(".cu-item").boundingClientRect().exec((res) => { res[0].forEach((item) => { m += item.height; this.menuHeight.push(m); }) }); } ``` > 右邊聯動 scroll-view中的屬性`:scroll-into-view="'main-'+mainCur"`，和標題的`:id="'main-'+index"`進行相對應的關聯；點擊左邊菜單賦值給`mainCur`即可 ``` TabSelect(e) { this.tabCur = e.currentTarget.dataset.id; this.mainCur = e.currentTarget.dataset.id; }, ``` > 左邊聯動，重點 上面已經獲取到菜單和分類頁的高度，根據高度來對菜單加值，減值，實現左邊聯動滑動的效果 右邊`scroll-view`中屬性`@scroll="VerticalMain"`可監聽`scroll-view`滾動 ``` VerticalMain(e) { if (this.goodsHeight.length == 0) { return; } let scrollTop = e.detail.scrollTop + 10; let current = this.tabCur; if (scrollTop >= this.verticalNavTop) { if (current + 1 < this.goodsHeight.length && scrollTop >= this.goodsHeight[current]) { this.tabCur = current + 1; } } else { if (current - 1 >= 0 && scrollTop < this.goodsHeight[current - 1]) { this.tabCur = current - 1; } } this.verticalNavTop = scrollTop; }, ``` **優點**：如果得到的分類數據標題沒有id值，可根據此方法來 **缺點**：代碼量比用id來進行賦值多了一些，根據得到的接口數據來使用