uni-app 滚动到指定位置的操作方法
更新时间:2024年05月13日 15:03:23 作者:江-月*夜
这篇文章主要介绍了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.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 滚动到指定位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
这篇文章主要介绍了弱类型语言javascript开发中的一些坑,结合实例形式总结分析了javascript开发中关于变量、函数、数组、对象、作用域等相关知识点常见易错问题,需要的朋友可以参考下2019-08-08clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
这篇文章主要实现了无需Flash无需依赖任何JS库实现文本复制与剪切,是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,叫clipboard.js,感兴趣的小伙伴们可以参考一下2015-10-10javaScript年份下拉列表框内容为当前年份及前后50年
本文介绍的这个javaScript年份下拉列表框内容为当前年份及前后50年,默认显示当前年份,大家可以学习下2014-05-05
最新评论