uni-app 滚动到指定位置的操作方法

婧若钰熙

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

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

复制代码

1. data(){
   
2. return {
   
3. servicesLeftList:[],
   
4. scrollLeftTop：0,，//滚动位置
   
5. activeLeftTab:"" //选中的样式
   
6. }
   
7. }
   
8. getData() {
   
9.         //接口
   
10.         getServicesTree().then(res => {
    
11.                 this.servicesLeftList= res.data
    
12.                 res.data.forEach((item, ind) => {
    
13.                                 setTimeout(()=>{
    
14.                                         uni.createSelectorQuery().in(this).select('#scroll' + item.id)
    
15.                                                 .boundingClientRect(res => {
    
16.                                                         scrollLeftTop.value = 65 * ind; // 设置滚动条距离左侧的距离                                            
    
17.                                                 }).exec()
    
18.                                 },100)
    
19.                 })
    
20.         })
    
21. }

复制代码

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

1. <view class="left-box" >
   
2.                                 <view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
   
3.                                          :class="{'active':activeLeftTab==item.id}">
   
4.                                         {{item.name}}
   
5.                                 </view>
   
6.                         </view>
   
7. //方法
   
8. uni.pageScrollTo({
   
9.         scrollTop: 0,
   
10.         duration: 500
    
11. });

复制代码

方法三 用scroll-view描点

1. //左边 :scroll-top="scrollLeftTop"
   
2. <scroll-view scroll-y="true" class="left-box" scroll-with-animation="true"
   
3.         :scroll-into-view="tracingLeftPoint">
   
4.         <view class="scroll-view-item" v-for="(item,index) in servicesLeftList" :key="item.id"
   
5.                 :id="'scroll' + item.id" :class="{'active':activeLeftTab==item.id}">
   
6.                 {{item.name}}
   
7.         </view>
   
8. </scroll-view>
   
9. //方法
   
10. data(){
    
11.         retrun {
    
12.                 tracingLeftPoint:"",//描点id
    
13.         }
    
14. }
    
15.         getData() {
    
16.         //接口
    
17.                 getServicesTree().then(res => {
    
18.                         this.servicesLeftList= res.data
    
19.                         res.data.forEach((item, ind) => {
    
20.                                         setTimeout(()=>{
    
21.                                                 this.tracingLeftPoint= 'scroll' + item.id
    
22.                                         },200)
    
23.                         })
    
24.                 })
    
25.         }

复制代码

到此这篇关于uni-app 滚动到指定位置的文章就介绍到这了,更多相关uni-app 滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/321054kjm.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！