Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

touchMove的时候 e.preventDefault无效 #453

Closed
1026203093 opened this issue Nov 15, 2022 · 10 comments
Closed

touchMove的时候 e.preventDefault无效 #453

1026203093 opened this issue Nov 15, 2022 · 10 comments

Comments

@1026203093
Copy link

因为业务中 通过touch事件实现类似swipe的功能,可滑动区域左右滑动的时候,页面整体都Y轴也会变动,看到kbone中的eventjs中有这么一段
preventDefault() {
// 目前仅支持 a 标签的点击阻止
this.$_preventDefault = true
}
是这个导致的么,那如何才能阻止默认事件呢

@JimmyVV
Copy link
Contributor

JimmyVV commented Nov 15, 2022 via email

@1026203093
Copy link
Author

那扩展库版本太旧导致头像填写能力的问题麻烦更新下哈 上次一个维护的老师是直接给我element,和render那两个文件包让我直接放到我本地中 但是这个太占项目空间了

@1026203093
Copy link
Author

那扩展库版本太旧导致头像填写能力的问题麻烦更新下哈 上次一个维护的老师是直接给我element,和render那两个文件包让我直接放到我本地中 但是这个太占项目空间了

请问下这个扩展库更新了么

@JuneAndGreen
Copy link
Collaborator

扩展库更新问题正在处理

@JuneAndGreen
Copy link
Collaborator

kbone 本身无法支持标准的 preventDefault,因为小程序的双线程架构,事件是异步来到逻辑层的,此时逻辑层想要去阻止视图层的事件势必会滞后,所以小程序本身也没支持这个能力,因此 kbone 也无法完全兼容。kbone 提供的 preventDefault 只能做到阻止点击跳转等可以监管的事件。

如果要实现阻止外层滚动之类的,可以使用 wx-catch 等,他会将事件绑定使用 catchbind 来处理:

https://wechat-miniprogram.github.io/kbone/docs/guide/advanced.html#%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F%E6%89%A9%E5%B1%95

@1026203093
Copy link
Author

感谢大佬及时解惑,那就是说如果kbone中 利用 touchmove 和 toustart ,touchend 无法做到和小程序的轮播效果一样对么 ?
因为我swipe-item中会有点击事件,如果使用wx-catch的话 在touchmove的时候 就不能使整个bodyY轴移动了。
我现在使用的是wx-capture ,但是我移动沿着X轴触发touchmove的时候 body的Y轴也在滚动
而且现在我移动的时候 是使用translate3D改变当前swipe-item X轴位置 安卓机会很卡,ios就比较流畅

@JuneAndGreen
Copy link
Collaborator

JuneAndGreen commented Nov 21, 2022

这个倒不是完全做不到,得看具体场景,如果需要按需控制外层是否可以滚动的话(或使用 preventDefault),目前是做不到。如果没有特殊需求的话,可以直接把自实现 swiper 外层直接用 wx-catch 给包住,这样事件就不会漏到外面去了,外面也就响应不到自实现 swiper 里面的手势。而小程序内置的 swiper 是直接实现在视图层,所以可以做到阻止默认事件,所以如果没有特殊需求的话,其实比较建议直接用小程序内置的 swiper 来实现。

至于卡顿的问题你这里应该是有频繁的更新?如果有的话,针对频繁更新的节点可以都放在一个 wx-view 里面: https://wechat-miniprogram.github.io/kbone/docs/guide/optimize.html#%E5%A4%84%E7%90%86%E9%A2%91%E7%B9%81%E6%9B%B4%E6%96%B0%E7%9A%84-dom-%E8%8A%82%E7%82%B9

( 还有一种方案是直接用原生的 wxs 来做,wxs 可以做到直接在视图层修改页面节点:https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html ,而 kbone 也支持使用小程序的自定义组件,所以可以直接将整个自实现的 swiper 用做成原生的自定义组件,然后 kbone 来接入使用:https://wechat-miniprogram.github.io/kbone/docs/guide/advanced.html#%E4%BD%BF%E7%94%A8%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6 ,理论上来说,大部分原生能做但 kbone 做不了的,都可以用这个方式来兜底 )

@1026203093
Copy link
Author

辛苦大佬细心的解答 第一种 第二种我这边可以再尝试下(按需控制外层是否可以滚动估计还是做不到),但是第三种有一个弊端 就是自定义组件他会默认放到主包里面,可以放到我指定的分包么

@JuneAndGreen
Copy link
Collaborator

第三种想放分包倒不是不行,只是需要绕一下,你可以把真正复杂逻辑的组件放到分包,然后主包这里留一个 wrapper 自定义组件给 kbone 用。而主包这个 wrapper 自定义组件可以通过分包异步化这个特性来使用任意分包的自定义组件:https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html

相当于主包做个没有具体业务逻辑的管理组件,根据你需要使用不同分包的自定义组件即可。

@1026203093
Copy link
Author

谢谢大佬指点

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants