我要评论
方法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.data
res.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.data
res.data.foreach((item, ind) => {
settimeout(()=>{
this.tracingleftpoint= 'scroll' + item.id
},200)
})
})
}到此这篇关于uni-app 滚动到指定位置的文章就介绍到这了,更多相关uni-app 滚动到指定位置内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论