博客
关于我
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 聚簇索引&&二级索引&&辅助索引
    查看>>
    Mysql 脏页 脏读 脏数据
    查看>>
    mysql 自增id和UUID做主键性能分析,及最优方案
    查看>>
    Mysql 自定义函数
    查看>>
    mysql 行转列 列转行
    查看>>
    Mysql 表分区
    查看>>
    mysql 表的操作
    查看>>
    mysql 视图,视图更新删除
    查看>>
    MySQL 触发器
    查看>>
    mysql 让所有IP访问数据库
    查看>>
    mysql 记录的增删改查
    查看>>
    MySQL 设置数据库的隔离级别
    查看>>
    MySQL 证明为什么用limit时,offset很大会影响性能
    查看>>
    Mysql 语句操作索引SQL语句
    查看>>
    MySQL 误操作后数据恢复(update,delete忘加where条件)
    查看>>
    MySQL 调优/优化的 101 个建议!
    查看>>
    mysql 转义字符用法_MySql 转义字符的使用说明
    查看>>
    mysql 输入密码秒退
    查看>>
    mysql 递归查找父节点_MySQL递归查询树状表的子节点、父节点具体实现
    查看>>