拖更一个月,抱歉!(露出肚皮)
主要是过年+考研复习,最近没时间写博客
就分享下最近写的项目遇到的问题
观前提示:本篇文章所有内容基于Taro+React+typescript,我会尽量敲一遍ts代码再敲一遍js代码(快夸我贴心!快o(´^`)o),并且打包在小程序端,不讨论h5端的所有情况!!
最近碰到一个问题,是关于获取使用Taro来获取小程序中某元素的DOM节点的内容的,我尝试使用js原生的方法来获取
document.getElementsByClassName('demoDOM')
虽然获取的内容很全面
但是,这个方法还是原来的老毛病,太麻烦!而且无法获取其css样式
于是查了下官网,有了以下的新方案
let query = Taro.createSelectorQuery();
query.select('.demoDOM').boundingClientRect((res) => {
console.log(res);
}).exec()
如果写在生命周期函数中的话(vue和react的都要!),需要添加一个200ms的延时定时器,否则会收获一个寂寞!
setTimeout(() => {
let query = Taro.createSelectorQuery();
query.select('.demoDOM').boundingClientRect((res) => {
console.log(res);
}).exec()
}, 200)
我获取的结果
有人肯定会问,哎这是什么玩玩,获取的就这么点东西,怎么能说是更好的解决方案呢?
且慢
仔细看里面的内容,这些都是无法使用上面的方法获取到的,在style属性中根本找不到!
而且,这些都是获取到的最基本的信息,我们可以也可以根据自己的需求返回我们想要的信息!
let query = Taro.createSelectorQuery();
query.select('.demoDOM').fields({
computedStyle: ['margin', 'backgroundColor']
}, (res) => {
console.log(res);
}).exec()
最后我们就会获得这个元素的外边距和背景颜色,这些都是实打实的样式,就算您把样式和类名或者id绑定,它都可以获取得到。
这里,如果您使用ts书写的话,如果您的属性不符合其要求或者属性名书写不规范的话,都会警告,记得盯紧这些细微的信息!
好了贴完代码了,如果您只是来cv搬砖的,今天的CSDN就看到这里吧!(bushi)接下来我们说下关键代码!
Taro.createSelectorQuery()
: 返回一个 SelectorQuery 对象实例,也代表从这里开始寻找节点,建议使用参数来接收一下!
let ele = Taro.createSelectorQuery()
boundingClientRect((result) => void)
: 里面需要传入一个函数,返回所获取的所有结果,是个回调函数
Taro.createSelectorQuery().select('.demoDOM').boundingClientRect((res) => {
console.log(res, 'ddd');
})
exec()
: 此处开始执行寻找DOM
Taro.createSelectorQuery().select('.demoDOM').boundingClientRect((res) => {
console.log(res, 'ddd');
}).exec()
fields(fields)
: 传入对象,里面填写所有想要搜寻的内容
let query = Taro.createSelectorQuery();
query.select('.demoDOM').fields({
dataset: true,
computedStyle: ['margin', 'backgroundColor', 'left', 'top', 'borderRadius'],
properties: ['scrollX', 'scrollY'],
scrollOffset: true,
size: true,
context: true
}, (res) => {
console.log(res);
}).exec()
所有合法参数见官网 官网–友情链接–直接打开,不要带犹豫,很快的!
如果您正在使用TS的话而且您的英语水平还算不错的话,建议跟着代码提示的脚步走
其他方法
context( (res) => void)
: 添加节点的 Context 对象查询请求。目前支持 VideoContext、CanvasContext、LivePlayerContext、EditorContext和 MapContext 的获取。以便执行这些特殊标签的特殊动作!
以一个视频标签为例
Taro.createSelectorQuery().select('.videoDemo').context(function (res) {
console.log(res.context)
}).exec()
node( (res) => void)
: 获取当前元素的实例(只有canvas标签支持)
Taro.createSelectorQuery().select('.canvas').node(function(res){
console.log(res.node)
}).exec()
selectAll(string)
: 搜寻所有符合条件的节点,返回一个数组
Taro.createSelectorQuery().selectAll('.demoDOM').boundingClientRect((res) => {
console.log(res, 'ddd');
}).exec()
selectViewport(string)
获取某个节点的滚动信息(前提是这个节点有滚轮(是ViewScroll组件))
这里不举例了,同上!
总结
英文名很长,记得熟记!切记不要使用原生的方法获取DOM,这样会很消耗性能!这里诚心推荐使用TS,代码提示超级顺畅!