关于前端:移动端滑动tab和table同时存在会引发什么问题

50次阅读

共计 1638 个字符,预计需要花费 5 分钟才能阅读完成。

上周上线了一个小的 webapp 我的项目,技术栈次要是 vue2 + echarts + vant2 + vue-easytable,这里重点总结一个 vue-easytable 滑动 tab 碰撞一起产生的问题。为了不便形容,下文会将 vue-easytable 简称为 table。


首先展现下成果:

 留神看,第一下是触摸到表格上的,所以表格失常滑动,第二下是触摸到表格下方的,所以 tab 标签页滑动了。

上面来剖析下:

在挪动端想要实现滑动 tab,vant2 的 tab 标签页组件就自带一个滑动属性 swipeable,只有加到 van-tabs 组件标签上即可实现了。

然而有的 tab 标签页是存在表格的,那么就要用到 table 组件。所以就呈现了如题的问题,这里进展几秒思考下,怎么保障滑动表格和滑动 tab 互不影响?

碰到这个问题,我的第一反馈就是如果触摸到表格上就禁止滑动 tab,否则就容许滑动 tab。

外围步骤如下:

  1. 监听 bodytouchstart 事件
  2. 事件回调函数中拿到一个触摸节点的惟一标识
  3. 依据这个惟一标识是否蕴含于 table 组件中,来动静更改 swipeable 的值

具体代码如下:

 因为有好几个标签页都有表格,所以为了不便保护,将外围代码写在一个 `mixin` 文件外面,而后每个标签页引入并执行,这样就不必每个标签页都定义一个 swipeable 变量了。
// commonMixin.js
export default {data() {
        return {mixinSwipeable: true}
    },
    methods: {mixinSwipeableHandler(){const myBody = document.getElementsByTagName('body')[0]
            myBody.addEventListener('touchstart', (e) => {console.log('isTouchTable', isTouchTable(e));
                this.mixinSwipeable = !isTouchTable(e)
            }, false)

            // 判断触摸的节点是否在表格内
            function isTouchTable(e) {
                const touchDomClassName = e.target.className
                console.log('touchDomClassName', touchDomClassName);
                // 依据 log 信息得出,触摸到表格节点元素的次要状况有三种,// 别离是表头,表格行,列头,它们的节点类名都是以 ve-table 结尾的
                // 这里或者有更适合的判断办法,只是目前没有发现 bug 哈哈
                return touchDomClassName.includes('ve-table')
            }
        }
    },
}
 而后就是在 van-tabs 组件标签上加上 :swipeable=“mixinSwipeable”,并引入这个 commonMixin.js 文件,最初在 mounted 外面执行 mixinSwiperableHandler 办法就能够了。

这里补充几点:

1. mixin 文件里的变量和函数后面加上 mixin 前缀,是为了一眼就能看出这个变量和办法是 mixin 里的,当然也就须要多敲几个字母,不免显得多余,或者有更好的形式能解决这个问题。不过话说回来,如果不这样命名,组件里全局搜寻不到的变量和办法,就要看下是否引入了 mixin 文件了。最初,切记 mixin 是一把双刃剑,不倡议滥用。2. 其实这个滑动 tab 的需要不是产品要求的,是测试私下提出来的,而且也没有强制要求肯定要做,对整个我的项目而言算是精益求精。从他提出需要到实现需求花了将近一个小时,虽说代码只有短短几行,然而思路才是最重要的。

最初

这几天还有一点思考,当触摸到的表格没有滚动条或者曾经滑到左右两端时,批改 mixinSwipeable 变量为 true,这样就能够间接滑动到下一个 tab 标签页了。欢送在评论区留言。


文笔无限,如果有没有表述分明的,还请多多包涵,有谬误的中央,万望告知,有什么疑难和倡议,能够多多交换。

正文完
 0