y***@163.com

发布：2023-06-14 10:07
更新：2023-06-14 10:25
阅读：191

【报Bug】scrollToElement无效

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win10

HBuilderX类型：正式

HBuilderX版本号： 3.8.4

手机系统： Android

手机系统版本号： Android 12

手机厂商：三星

手机机型：三星s21

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view>  
        <header>    
            <view ref="topRef" style="height: 0;">顶部标志</view>    
        </header>    
        <ul>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
            <li>111111111111</li>  
        </ul>  
        <view class="" @click="goTop()">  
            <text>返回顶部</text>    
        </view>  

    </view>  
  </template>  
  <script>  
    const dom = uni.requireNativePlugin('dom')    
       export default {    

           data() {    
               return {    

               }    
           },    
           methods: {    
               goTop() {    
                   console.log(99)  
                   dom.scrollToElement(this.$refs.topRef, {    
                       offset: 0    
                   })    
               }    
           }    
       }    
  </script>  
  <style scoped>  
   li{  
       height: 50px;  
   }  
  </style>

操作步骤：

使用模拟器或者手机运行安卓基座都不行

预期结果：

可以实现定位

实际结果：

无效

bug描述：

scrollToElement无效，实现不了定位

2023-06-14 10:07 负责人:无分享

2 个回复

y***@163.com (作者)

官网代码也不行
···
<template>
<view class="wrapper">
<scroller class="scroller">
<view class="row" v-for="(name, index) in rows" :ref="'item'+index">
<text class="text" :ref="'text'+index">{{name}}</text>
</view>
</scroller>
<view class="group">
<text @click="goto10" class="button">Go to 10</text>
<text @click="goto20" class="button">Go to 20</text>
</view>
</view>
</template>
<script>
const dom = uni.requireNativePlugin('dom')
export default {
data() {
return {
rows: []
}
},
created() {
for (let i = 0; i < 30; i++) {
this.rows.push('row ' + i)
}
},
methods: {
goto10(count) {
const el = this.$refs.item10[0]
dom.scrollToElement(el, {})
},
goto20(count) {
const el = this.$refs.item20[0]
dom.scrollToElement(el, {
offset: 0
})
}
}
}
</script>
<style scoped>
.scroller {
width:700rpx;
height:500px;
border-width: 3px;
border-style: solid;
border-color: rgb(162, 217, 192);
margin:0 25rpx;
}
.row {
height: 100rpx;
flex-direction: column;
justify-content: center;
padding-left: 30rpx;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #DDDDDD;
}
.text {
font-size: 45rpx;
color: #666666;
}
.group {
flex-direction: row;
justify-content: center;
margin-top: 60rpx;
}
.button {
width: 200rpx;
padding-top: 20rpx;
padding-bottom: 20rpx;
font-size: 40rpx;
margin-left: 30rpx;
margin-right: 30rpx;
text-align: center;
color: #41B883;
border-width: 2px;
border-style: solid;
border-color: rgb(162, 217, 192);
background-color: rgba(162, 217, 192, 0.2);
}
</style>

···

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

getElementScollTop() {  
                const query = uni.createSelectorQuery().in(this);  
                query.select('#topRef').boundingClientRect(data => {  
                    console.log("得到布局位置信息" + JSON.stringify(data));  
                    console.log("节点离页面顶部的距离为" + data.top);  
                    let pageScrollTop = Math.round(data.top)  
                    uni.pageScrollTo({  
                        scrollTop: pageScrollTop, //滚动的距离  
                        duration: 0, //过渡时间  
                    })  
                }).exec();  
            },

<view ref="topRef" id="topRef" style="height: 0;">顶部标志</view> 给元素当定id

喜欢技术的前端

给元素绑定id <view ref="topRef" id="topRef" style="height: 0;">顶部标志</view>

2023-06-14 10:26
y***@163.com (作者)

回复喜欢技术的前端: 谢谢您，您的方法好使，dom.scrollToElement方法不知道为啥就用不了，官方提供的例子也不行

2023-06-14 10:39
喜欢技术的前端

回复 y***@163.com: 好使就行，哈哈

2023-06-14 10:42
y***@163.com (作者)

回复喜欢技术的前端: 哈哈，谢谢

2023-06-14 10:43
喜欢技术的前端

回复 y***@163.com: 不客气不客气

2023-06-14 10:59
2***@qq.com

回复喜欢技术的前端: 直播间弹幕滑动到最底部的能做吗 nvue list+cell

2023-08-16 10:21
喜欢技术的前端

回复 2***@qq.com: 弹幕列表这个这个你可以用scroll-view

2023-08-16 10:23

要回复问题请先登录或注册

【报Bug】scrollToElement无效

操作步骤：

使用模拟器或者手机运行安卓基座都不行

预期结果：

可以实现定位

实际结果：

无效

bug描述：

2 个回复

公告

相关问题

【报Bug】scrollToElement无效

操作步骤： 使用模拟器或者手机运行安卓基座都不行

预期结果： 可以实现定位

实际结果： 无效

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

使用模拟器或者手机运行安卓基座都不行

预期结果：

可以实现定位

实际结果：

无效