kbone dom api多端差异

1,396 阅读1分钟

kbone采取的是抹平底层渲染环境的方式实现同构,但是仍然有部分dom的api使用时有需要注意的地方。希望在后面的迭代中越来越好。

getBoundingClientRect的实现

scrollTop是做交互常用的属性,比如滑动、拖动等。在web中通过dom.getBoundingClientRect方法可以获取到。在同构方案中, 对于getBoundingClientRect的实现,可以看到/miniprogram-render/node/element.js 里是mock的,只做兼容使用。

这里提到需要使用 ?getBoundingClientRect, 看一下它的实现:

里面封装了小程序里的getBoundingClientRect的实现。

小程序端的 getBoundingClientRect 实现:

 节点必须是viewport或者scroll-view:
 https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.scrollOffset.html
 
 
 功能类似于 DOM 的 getBoundingClientRect:
 https://developers.weixin.qq.com/miniprogram/dev/api/wxml/NodesRef.boundingClientRect.html

这里会遇到非viewport的dom元素,如何获取其scrollTop的问题。可以采用的做法可以是:该滚动元素的第一个子元素的top,一定程度上可以代替滚动元素的scrollTop.

点击事件

有些api是web和小程序都可以拿到的:

比如:event.targetTouches在web和小程序里都可以拿到

可视区的属性

document.documentElement.clientWidth在小程序里需要用wx.getSystemInfoSync().safeArea.width;

屏幕高度的属性需要用 document.documentElement.scrollTop|| document.body.scrollTop||wx.getSystemInfoSync().safeArea.top;

style scope

用vue时注意不要用 scope, 在小程序里不生效并且导致样式丢失。

KSwiper change 事件参数

kbone-ui中有些事件参数,小程序里和web不同,需要根据环境判断(这里改起来应该是容易的,不知道为啥没有实现):