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

这篇文章主要介绍了uni-app 滚动到指定位置的操作方法,其中方法一是使用标签,可以将页面横向(或纵向)滚动到指定位置还有其他多种方法,需要的朋友可以参考下

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)
            })
        })
    }
声明:本站所有信息内容均由用户自行发表,该内容观点仅代表用户本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。Email:tellusa@foxmail.com

给TA打赏
共{{data.count}}人
人已打赏
JS教程

JavaScript利用事件循环实现数据预加载

2024-5-16 23:18:35

JS教程

关于封装axios网络请求降低代码耦合度详解

2024-5-16 23:46:50

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
有新私信 私信列表
搜索