本文共 2963 字，大约阅读时间需要 9 分钟。

在开发移动应用时，处理手动触控滚动事件是一个关键任务。我们的目标是为不同的手机品牌和系统提供一致的滚动处理方案，同时确保滑动体验流畅自然。在这个项目中，我们尝试封装了一个自定义滚动组件，并通过index.html和app.vue进行了集成和优化。

1. 基础配置

首先，我们在index.html中添加了一些基本的touch事件处理逻辑：

此外，在body和html中添加了CSS样式，使页面高度占据整个屏幕，并启用了滚动条：

html, body, #app, .wx-pages {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    width: 100%;
    top: 0;
}

这些设置确保页面可以在滚动时保持固定，适合移动设备显示。

2. 滚动组件的封装

接下来，我们开发了一个自定义的Scroll组件。其主要目标是在不同设备上提供一致的滚动体验，同时修复一些特殊情况下的滑动问题。该组件的代码如下：

export default {
    name: 'scroll',
    mounted() {
        this.wScroll(this.$refs.scroll);
    },
    methods: {
        wScroll(elem) {
            let startX = 0;
            let startY = 0;
            elem.addEventListener('touchstart', function(evt) {
                const touch = evt.touches[0];
                startX = touch.pageX;
                startY = touch.pageY;
            });
            elem.addEventListener('touchmove', function(evt, isFirst) {
                if (evt === undefined || evt.type === 'touchmove' && !isFirst) {
                    return;
                }
                const touch = evt.touches[0];
                const currentTop = elem.scrollTop;
                const contentHeight = elem.scrollHeight - elem.offsetHeight;
                if (contentHeight <= 0) {
                    return;
                }
                const distance = Math.sqrt(
                    Math.pow(touch.pageX - startX, 2) + 
                    Math.pow(touch.pageY - startY, 2)
                );
                if (currentTop === 0) {
                    if (distance > 0) {
                        if (touch.clientY > startY) {
                            evt.preventDefault();
                        } else {
                            evt.stopPropagation();
                        }
                    }
                } else if (currentTop === contentHeight) {
                    if (distance > 0) {
                        elem.scrollTop = currentTop - 1;
                    }
                } else {
                    if (distance > 0) {
                        ev preventDefault();
                    }
                }
                startX = touch.pageX;
                startY = touch.pageY;
            }, { 
                passive: false 
            });
        }
    }
}

这个组件通过计算手指移动的距离（水平和垂直方向），并根据当前滚动状态（是否在顶部或底部）来决定是否阻止滚动，或者调整滚动位置。

3. 应用组件集成

最后，我们在app.vue中集成自定义scroll组件：

在script部分，我们将该组件导入并进行了使用：

优化思路

在开发过程中，我们遇到了一个问题：在特定手机品牌的安卓系统上，下拉和上拉滚动行为无法正常完成。经过分析，我们发现问题出在touchmove事件的处理逻辑中，特别是在计算手指位移和判断滚动状态时存在误差。

优化步骤如下：

结果验证

经过优化，我们可以在不同设备上验证滚动行为的正确性：

• 触控流畅性：用户的手势和平滑滑动支持).
• 滚动无阻碍：用户可以在顶部和底部顺利滚动，无论是上拉还是下拉.
• 代码简洁性：滚动逻辑简化，避免了复杂的事件绑定和处理.

这些优化确保了应用程序在各种设备上的良好性能和用户体验。通过这种方法，我们成功解决了平板设备上的滑动问题，并实现了一致的滚动行为。优化后的组件在生产环境中表现优异，得到了用户的认可.

转载地址：http://wbmkk.baihongyu.com/