uni-app h5端，onPageScroll监听scrollTop在跳转页面时错误触发onPageScroll事件，导致scrollTop变为了0

uni-app h5端，onPageScroll监听scrollTop在跳转页面时错误触发onPageScroll事件，导致scrollTop变为了0

操作步骤：

  1. 在onPageScroll生命周期里，输出距离顶部距离console.log(e.scrollTop)
  2. 滚动滚动条至scrollTop 100（大于0）
  3. 点击当前页面上的任意链接如商品详情页，跳转方式是uni.navigateTo()
  4. 查看日志输出的地方，console.log(e.scrollTop)会输出0

预期结果：

预期跳转到商品详情页的时候不要触发onPageScroll生命周期，不要将scrollTop变成0

实际结果：

实际结果是当跳转页面时页面上的scrollTop变成了0

bug描述：

在H5端，onPageScroll，在首页监听scrollTop当前距离顶部距离，比如scrollTop滚动到了100，点击页面上的跳转链接会触发onPageScroll生命周期，scrollTop变为了0，返回页面scrollTop又为100
首页页面顶部导航栏背景默认是透明颜色，当scrollTop大于20才改变颜色，但是跳转页面后scrollTop变为了0，导致页面返回后当实际scrollTop大于20时背景也是透明色
真机和微信开发者工具都出现这个问题

开发环境 版本号 项目创建方式
Windows 10 家庭中文版 HBuilderX
浏览器 微信开发者工具 -
平台 微信内置浏览器 -
IDE HBuilderX 3.3.13
项目 H5 https://app.hujintuan.com/app/#/

更多关于uni-app h5端，onPageScroll监听scrollTop在跳转页面时错误触发onPageScroll事件，导致scrollTop变为了0的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

先看onhide先出发还是pagescroll先触发， 实在不行给个demo吧 这边看一下

更多关于uni-app h5端，onPageScroll监听scrollTop在跳转页面时错误触发onPageScroll事件，导致scrollTop变为了0的实战教程也可以访问 https://www.itying.com/category-93-b0.html


有同样的问题 页面切走时, scrollTop变0, 但back回来后, 页面保持了之前的滚动高度, 但是没有onPageScroll事件, scrollTop的值还是0

在 uni-app 的 H5 端，onPageScroll 事件在页面跳转时可能会错误触发，导致 scrollTop 变为 0。这是因为在页面跳转时，页面可能会重新渲染或重置，导致 onPageScroll 事件被触发。

解决方案

  1. 使用 onHide 和 onShow 生命周期钩子： 你可以在页面跳转时，通过 onHide 和 onShow 生命周期钩子来控制 onPageScroll 事件的触发。

    export default {
    data() {
        return {
            isPageActive: true
        };
    },
    onPageScroll(e) {
        if (this.isPageActive) {
            console.log('ScrollTop:', e.scrollTop);
            // 处理滚动逻辑
        }
    },
    onHide() {
        this.isPageActive = false;
    },
    onShow() {
        this.isPageActive = true;
    }
};

    在 onHide 中设置 isPageActive 为 false，在 onShow 中设置为 true，这样在页面跳转时就不会触发 onPageScroll 事件。

  2. 使用 uni.$on 和 uni.$off 事件监听： 你可以在页面跳转时手动移除 onPageScroll 事件监听，跳转回来时再重新监听。

    export default {
    methods: {
        handlePageScroll(e) {
            console.log('ScrollTop:', e.scrollTop);
            // 处理滚动逻辑
        }
    },
    onLoad() {
        uni.$on('pageScroll', this.handlePageScroll);
    },
    onUnload() {
        uni.$off('pageScroll', this.handlePageScroll);
    }
};

    在 onLoad 中监听 pageScroll 事件，在 onUnload 中移除监听。

  3. 使用 scroll-view 组件： 如果你只需要监听某个区域的滚动事件，可以使用 scroll-view 组件，并监听其 scroll 事件。

    <scroll-view scroll-y [@scroll](/user/scroll)="handleScroll">
    <!-- 内容 -->
</scroll-view>

    export default {
    methods: {
        handleScroll(e) {
            console.log('ScrollTop:', e.detail.scrollTop);
            // 处理滚动逻辑
        }
    }
};

    这样可以避免全局的 onPageScroll 事件触发问题。

  4. 延迟处理 onPageScroll 事件： 如果 onPageScroll 事件在页面跳转时被触发，你可以通过延迟处理来避免误判。

    export default {
    data() {
        return {
            scrollTop: 0,
            isPageActive: true
        };
    },
    onPageScroll(e) {
        if (this.isPageActive) {
            setTimeout(() => {
                this.scrollTop = e.scrollTop;
                console.log('ScrollTop:', this.scrollTop);
                // 处理滚动逻辑
            }, 100);
        }
    },
    onHide() {
        this.isPageActive = false;
    },
    onShow() {
        this.isPageActive = true;
    }
};
回到顶部