### 点击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来进行赋值多了一些，根据得到的接口数据来使用