本文共 2905 字，大约阅读时间需要 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/