IT俱乐部 JavaScript uni-app 滚动到指定位置的操作方法

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

发布: 2024年 5月 26日 426阅读

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

{{item.name}}

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

                    {{item.name}}
                 
//方法
uni.pageScrollTo({
    scrollTop: 0,
    duration: 500
});

方法三用scroll-view描点

//左边 :scroll-top="scrollLeftTop"
 
        {{item.name}}
     
//方法
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 滚动到指定位置内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/11032.html

69赞

标签:app uni 指定操作方法滚动