微信小程序 view的高度是被内容撑开的 怎么获取它的高度

Posted 2023-03-17

这个代码肯定可以查到的，这是官方查DOM属性的API，查到的属性其实也很有限，但是高度是绝对可以查到的，查不到高度的同学可以去看官方文档！

首先给你的xml对象一个id：

<view class="usermotto" style="height:213px;" id='mjltest'/>

然后在js里，用一个SelectorQuery来选择对应id的节点（注意id前面要加一个#号），就可以获取对应节点的属性，包括高度。

//创建节点选择器
var query = wx.createSelectorQuery();
query.select('#mjltest').boundingClientRect()
query.exec(function (res) 
//res就是 所有标签为mjltest的元素的信息 的数组
console.log(res);  
//取高度
console.log(res[0].height);
)

参考技术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 

);

高级

如果是列表，需要结合复杂数据处理，建议阅读

参考技术B $("view").offsetHeigt(); 参考技术C 所以呢？答案是神马

微信小程序-动态获取view高度

参考技术A 因为对小程序父标签和子标签的布局还不是特别了解，不像ios，父标签固定，子标签通过mansory去布局距离父的底部多少即可。小程序的我能想到的就是动态算出每一个标签的高度，然后总高度减掉就是想得到的子标签的高度了。如果有哪位大神可以指导一二，感激不尽~~~

<view id='viewID'>

<view id="scriptID">

        var query = wx.createSelectorQuery();

        //选择id

        query.select('#numID').boundingClientRect()

        query.select('#scriptID').boundingClientRect()

        query.exec(function (res)

          //res就是 所有标签为mjltest的元素的信息 的数组

          console.log('所有：',res);

          //取高度

          that.setData(

            storyHeight:that.data.detailHeight -(res[0].height+res[1].height)

          )

        );