微信小程序dom操作

Posted 2023-05-09

参考技术A 文档： 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的第一个参数中返回

微信小程序如何获取某个view高度然后赋值给另外一个view

微信小程序如何获取某个view实际高度赋值给另外一个view

参考技术A 在小程序中没有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
);