博客
关于我
vue项目,微信中打开下拉隐藏头部来源
阅读量:777 次
发布时间:2019-03-24

本文共 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/

    你可能感兴趣的文章
    mysql 写入慢优化
    查看>>
    mysql 分组统计SQL语句
    查看>>
    Mysql 分页
    查看>>
    Mysql 分页语句 Limit原理
    查看>>
    MySQL 创建新用户及授予权限的完整流程
    查看>>
    mysql 创建表,不能包含关键字values 以及 表id自增问题
    查看>>
    mysql 删除日志文件详解
    查看>>
    mysql 判断表字段是否存在,然后修改
    查看>>
    mysql 协议的退出命令包及解析
    查看>>
    mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
    查看>>
    mysql 多个表关联查询查询时间长的问题
    查看>>
    mySQL 多个表求多个count
    查看>>
    mysql 多字段删除重复数据,保留最小id数据
    查看>>
    MySQL 多表联合查询:UNION 和 JOIN 分析
    查看>>
    MySQL 大数据量快速插入方法和语句优化
    查看>>
    mysql 如何给SQL添加索引
    查看>>
    mysql 字段区分大小写
    查看>>
    mysql 字段合并问题(group_concat)
    查看>>
    mysql 字段类型类型
    查看>>
    MySQL 字符串截取函数,字段截取,字符串截取
    查看>>