微信小程序如何获取某元素下的view

wxml代码

<view class="test" bindtap="switchButton">

<button hidden="{{buttonHidden}}">切换显示</button>

</view>

wxss代码

switchButton: function () {

thissetData({

buttonHidden: true

})

}

类似这个逻辑，点击view隐藏，切换的话你自己完成吧

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

<view id='viewID'>

<view id="scriptID">

        var query = wxcreateSelectorQuery();

        //选择id

        queryselect('#numID')boundingClientRect()

        queryselect('#scriptID')boundingClientRect()

        queryexec(function (res) {

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

          consolelog('所有：',res);

          //取高度

          thatsetData({

            storyHeight:thatdatadetailHeight -(res[0]height+res[1]height)

          })

        });

类似如图背景底部显示半透明文本view：

wxml

wxss

要点： 父视图的position: relative; 重叠放置在父视图上的视图postion: absolute。

上一章即微信小程序之view的flex布局(1)里，我们学习了flex容器的属性，总结一下它里面包括

(1)flex-direction 设置容器内子元素即flex-item的排列方向。

(2)flex-warp 设置容器内子元素是否换行。

(3)justify-content 设置子元素在横轴即X轴的排列位置

(4)align-items 设置子元素在Y轴的排列位置

(5)align-content 设置子元素在多个主轴线上排列的位置。

下面我们来讲讲 flex-item的属性，在flex容器中，每个子元素就是一个flex-item

如果item没有设置order，则order默认为0，如图我设置了view2,3,4的位置为3,2,1 看效果图：

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。效果看图：

因为设置了view3，4设置了left-align属性 ，所以没有均分，大家可以去掉尝试一下。

直接上图  

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

资料地址     demo 地址

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

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

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

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

//创建节点选择器

var query = wxcreateSelectorQuery();

queryselect('#mjltest')boundingClientRect()

queryexec(function (res) {

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

consolelog(res);  

//取高度

consolelog(res[0]height);

})

searchwxml部分内容：

<view class='search_box page_row'>

<view class='search'>

<view class='search_item'>

<icon class='search_icon' size='20' type='search'></icon>

<input value='' placeholder='搜索您要找的商品' bindinput='bindInput'/>

</view>

</view>

<view class='search_btn' bindtap='search'>搜索</view>

</view>

searchwxss样式部分：

search_box{width:100%;background:#2587f1;padding:0 0 10px;display: flex;flex-direction: row}

search{width: calc( 100% - 64rpx );}

search_item{border: 1px solid #d0d0d0;border-radius: 10rpx;margin-left: 20rpx;background:#fff;}

search_item input{margin-left: 60rpx;height: 60rpx;border-radius: 5px;background:#fff;}

search_btn{width: 15%;height: 60rpx;line-height:60rpx;text-align: center;background:transparent;color:#fff;}

search_icon{margin: 10rpx 10rpx 10rpx 10rpx;position: absolute;left:25rpx;z-index: 2;width: 20px;height: 20px;text-align: center;}

以上就是关于微信小程序如何获取某元素下的view全部的内容，包括:微信小程序如何获取某元素下的view、微信小程序-动态获取view高度、小程序视图view重叠展示示例等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！