微信小程序dom *** 作

文档： https://developers.weixin.qq.com/miniprogram/dev/api/wxml-nodes-info.html

即使是小程序，也难免有dom *** 作

wx.createSelectorQuery()返回一个SelectorQuery对象实例

nodesRef.boundingClientRect([callback])

nodesRef.scrollOffset([callback])

nodesRef.fields(fields, [callback])

selectorQuery.in(component) 将选择器的选取范围更改为自定义组件component内

selectorQuery.select(selector) 在当前页面下选择第一个匹配选择器selector的节点，返回一个NodesRef对象实例，可以用于获取节点信息

selectorQuery.selectAll(selector) 在当前页面下选择匹配选择器selector的节点，返回一个NodesRef对象实例。它选择所有匹配选择器的节点。

selectorQuery.selectViewport() 选择显示区域，可用于获取显示区域的尺寸、滚动位置等信息，返回一个NodesRef对象实例

selectorQuery.exec([callback]) 执行所有的请求，请求结果按请求次序构成数组，在callback的第一个参数中返回

在小程序中没有DOM *** 作的方法，所以获取不到相应的DOM节点进行高度设置。

解决方案

1.css方案

<view class="{{isFold ?'flod':'extend' }}" bindtap="flodFn">

我是一个很长的文字

</view>

.flod{

//折叠样式

}

.extend{

//展开样式

}

flodFn:function(){

this.setData({

isFold: !this.isFold

})

}

2.动态渲染方案

<view bindtap="flodFn">

<view wx:if="{{isFold}}" >

我是一个很长的文字

</view>

<view wx:else>

我是一个很长的文字

</view>

</view>

flodFn:function(){

this.setData({

isFold: !this.isFold

})

}

微信小程序虽然是基于浏览器内核的，但它的界面却不是html（而是自创的wxml），所以是不支持获取dom元素的，因此也无法使用第三方插件。小程序本身有各种替代解决方案，自己去文档里找一下。

---