法子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
},二00)
})
})
}
到此那篇闭于uni-app 动弹到指定地位的文章便引见到那了,更多相闭uni-app 起色到指定职位地方形式请搜刮剧本之野之前的文章或者延续涉猎上面的相闭文章心愿大师之后多多支撑剧本之野!
发表评论 取消回复