yanwgenhua
yanwgenhua
  • 发布:2022-03-25 18:23
  • 更新:2023-07-31 16:33
  • 阅读:561

从A页面切换到B页面,再返回到A页面后。获取滚动面板每个元素距顶部高度,结果为负数

分类:uni-app
复现代码:  
**index.vue**  
<template>  
    <view class="content">  
        <button type="primary" class="content-btn" @click="onJump">页面跳转</button>  
        <scroll-view scroll-y="true" class="scroll-view" :scroll-into-view="scrollIntoView">  
            <view v-for="item in 100" class="scroll-item" :id="scrollIntoView + i">  
                {{item}}  
            </view>  
        </scroll-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                scrollTop: [],  
                scrollIntoView: ''  
            }  
        },  
        onShow() {  
            this.scrollTop = [];  
            this.scrollIntoView = 'scrollIntoView0';  
            this.getNodeInfo();  
        },  
        methods: {  
            getNodeInfo() {  
                console.log(this.scrollIntoView);  
                const query = uni.createSelectorQuery().in(this);  
                query.selectAll('.scroll-item').boundingClientRect(data => {  
                    data.forEach(item => {  
                        this.scrollTop.push(item.top);  
                    });  
                }).exec();  
                console.log(">>>>>", this.scrollTop);  
            },  
            onJump() {  
                uni.navigateTo({  
                    url: '../home/home'  
                });  
            }  
        }  
    }  
</script>  

<style scoped>  
    .content {  
        display: flex;  
        flex-direction: column;  
        min-height: 100vh;  
    }  

    .scroll-view {  
        flex-grow: 1;  
        background-color: #51A97D;  
        padding: 10rpx 0;  
        height: 1px;  
    }  

    .scroll-item {  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        height: 100rpx;  
        margin: 20rpx;  
        font-size: 50rpx;  
        background-color: #FFF;  
        border-radius: 30rpx;  
    }  

    .content-btn {  
        flex-shrink: 0;  
    }  
</style>  

home.vue

<template>
<view>
<button type="default" @click="onBack">返回上一页</button>
</view>
</template>

<script>
export default {
data() {
return {

        }  
    },  
    methods: {  
        onBack() {  
            uni.navigateBack({  
                delta: 1  
            });  
        }  
    }  
}  

</script>

<style>

</style>

2022-03-25 18:23 负责人:无 分享
已邀请:
yanwgenhua

yanwgenhua (作者)

休息了两天,上来一看,居然没人回复。今天之内没人回复,就打死在座的各位。

yanwgenhua

yanwgenhua (作者)

求解决方案

zqy233

zqy233

我使用你的代码,直接报错,感觉是页面没加载完就获取dom的原因,加上setTimeout正常了,而且也没遇到你的问题,你试下setTimeout?不知道uniapp中实现类似vue的nexttick的方法是啥,俺是uniapp小白

  getNodeInfo() {  
      setTimeout(() => {  
        const query = uni.createSelectorQuery().in(this)  
        query  
          .selectAll('.scroll-item')  
          .boundingClientRect(data => {  
            console.log(data)  
            data.forEach(item => {  
              this.scrollTop.push(item.top)  
            })  
            console.log('>>>>>', this.scrollTop)  
          })  
          .exec()  
      }, 500)  
    },
1***@qq.com

1***@qq.com

我也遇到一样的问题了 请问楼主解决了吗

要回复问题请先登录注册