1***@qq.com
1***@qq.com
  • 发布:2024-03-11 14:01
  • 更新:2024-03-11 14:31
  • 阅读:133

非H5环境下,uni-app如何获取view的实例?

分类:uni-app

使用背景:uni-app编写的微信小程序中的一段代码,要用JS控制view id="scrollBox"该节点的水平滚动条到某个水平位置
<view class="cardList_list" id="scrollBox">
<button>{{ item.name }}</button>
</view>
但是在官方文档检索了一遍,发现没有获取view的实例的方法。
有什么办法可以获取获取view的实例,并实现<该节点>水平滚动到某个位置?

2024-03-11 14:01 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

uni.createSelectorQuery() 这个api应该能帮助到你
参考文档:https://uniapp.dcloud.net.cn/api/ui/nodes-info.html
示例代码

<template>  
    <view>  
        <view id="viewDom">内容内容内容内容内容内容内容内容</view>  
        <button @tap="getView">获取节点信息</button>  
    </view>  
</template>  

<script>  
export default {  
    methods: {  
        getView() {  
            const query = uni.createSelectorQuery().in(this);  
            query  
              .select("#viewDom")  
              .boundingClientRect((data) => {  
                console.log("得到布局位置信息" + JSON.stringify(data));  
                console.log("节点离页面顶部的距离为" + data.top);  
              })  
              .exec();  
        },  
    }  
}  
</script>  
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

可以参考,滚动元素可以使用 uni.pageScrollTo

<template>  
    <view class="">  
        <view v-for="(item,index) in 100" :id="'list'+index">  
            item:{{item}}  
        </view>  
        <button @click="getElem" class="fiexd">getElem</button>  
    </view>  
</template>  
<script>  
    export default {  
        methods: {  
            getElem(){  
                const query = uni.createSelectorQuery().in(this);  
                query  
                  .select("#list10")  
                  .boundingClientRect((data) => {  
                    console.log("节点离页面顶部的距离为" + data.top);  
                    uni.pageScrollTo({  
                        scrollTop:Math.abs(data.top)  
                    })  
                  })  
                  .exec();  
            }  
        }  
    }  
</script>  
<style>  
    .fiexd{  
        position: absolute;  
        top: 0;  
        right: 0;  
        z-index: 10;  
    }  
</style>

要回复问题请先登录注册