uni-app 滚动到指定位置-编程知识

uni-app 滚动到指定位置

在这里插入图片描述
方法1：使用标签，可以将页面横向（或纵向）滚动到指定位置
无法滚动将代码放在setTimeout，nextTick里执行

<!-- 左边 --><scroll-view show-scrollbar="false" scroll-y="true" class="left-box":scroll-top="scrollLeftTop" scroll-with-animation="true"><view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id":id="'scroll' + activeLeftTab" :class="{'active':activeLeftTab==item.id}">{{item.name}}</view></scroll-view>

data(){
return {
servicesLeftList:[],
scrollLeftTop：0,，//滚动位置
activeLeftTab:"" //选中的样式
}
}getData() {//接口getServicesTree().then(res => {this.servicesLeftList= res.datares.data.forEach((item, ind) => {setTimeout(()=>{uni.createSelectorQuery().in(this).select('#scroll' + item.id).boundingClientRect(res => {scrollLeftTop.value = 65 * ind; // 设置滚动条距离左侧的距离    				        }).exec()},100)})})
}

方法二使用uni.pageScrollTo 使页面纵向滚到到指定位置
建议设置height为auto :height:auto

<view class="left-box" ><view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id":class="{'active':activeLeftTab==item.id}">{{item.name}}</view></view>
//方法
uni.pageScrollTo({scrollTop: 0,duration: 500
});

方法三用scroll-view描点

 //左边 :scroll-top="scrollLeftTop"
<scroll-view scroll-y="true" class="left-box" scroll-with-animation="true":scroll-into-view="tracingLeftPoint"><view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id":id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">{{item.name}}</view>
</scroll-view>//方法data(){retrun {tracingLeftPoint:"",//描点id}
}getData() {//接口getServicesTree().then(res => {this.servicesLeftList= res.datares.data.forEach((item, ind) => {setTimeout(()=>{this.tracingLeftPoint= 'scroll' + item.id},200)})})}