uniapp 获取 view 的宽度、高度以及上下左右左边界位置

<view class="cont-box"></view>
/* 获取节点信息的对象 */
getElementRect() {
  const query = uni.createSelectorQuery().in(this);
  query
    .select(".cont-box")
    .boundingClientRect(res => {
      console.log(res);
      console.log(res.height); // 102.85714721679688
    })
    .exec();
}

boundingClientRect 返回的 res 结果(以像素[px]为单位)

属性类型说明
idString节点的 ID
datasetObject节点的 dataset
leftNumber节点的左边界坐标
rightNumber节点的右边界坐标
topNumber节点的上边界坐标
bottomNumber节点的下边界坐标
widthNumber节点的宽度
heightNumber节点的高度

更多可参考:uni.createSelectorQuery() | uni-app官网

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp中,可以通过使用swiper和view组件来实现右tab切换,并且让内容高度自适应。以下是一个示例代码: ``` <template> <view class="container"> <swiper autoplay="false" current="{{ current }}" class="swiper" duration="300" skip-hidden-item-layout="true" @change="swiperChange" > <swiper-item> <view class="tab-item" :class="{active: currentTab === 0}" @tap="changeTab(0)">Tab 1</view> </swiper-item> <swiper-item> <view class="tab-item" :class="{active: currentTab === 1}" @tap="changeTab(1)">Tab 2</view> </swiper-item> <swiper-item> <view class="tab-item" :class="{active: currentTab === 2}" @tap="changeTab(2)">Tab 3</view> </swiper-item> </swiper> <view class="content"> <view class="tab-content" :class="{active: currentTab === 0}" style="height: {{tabHeight[0]}}px"> Content 1 </view> <view class="tab-content" :class="{active: currentTab === 1}" style="height: {{tabHeight[1]}}px"> Content 2 </view> <view class="tab-content" :class="{active: currentTab === 2}" style="height: {{tabHeight[2]}}px"> Content 3 </view> </view> </view> </template> <script> export default { data() { return { current: 0, currentTab: 0, tabHeight: [0, 0, 0] }; }, methods: { swiperChange(e) { this.currentTab = e.detail.current; }, changeTab(index) { this.currentTab = index; this.current = index; } }, mounted() { const query = uni.createSelectorQuery().in(this); query.selectAll(".tab-content").boundingClientRect(rects => { this.tabHeight = rects.map(rect => rect.height); }).exec(); } }; </script> <style> .container { display: flex; flex-direction: column; height: 100vh; } .swiper { height: 80rpx; margin-top: 20rpx; } .tab-item { height: 80rpx; line-height: 80rpx; text-align: center; } .tab-item.active { color: #007aff; border-bottom: 3rpx solid #007aff; } .content { flex: 1; overflow: hidden; } .tab-content { position: absolute; left: 0; top: 0; width: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; transition: height 0.3s; } .tab-content.active { height: auto; } </style> ``` 在这个示例中,我们使用swiper和swiper-item组件来实现右tab切换,使用view组件来展示每个tab对应的内容。我们监听swiper的change事件,根据current属性来更新当前选中的tab,同时也更新currentTab属性。在每个tab-content的样式中,我们设置了height为auto,这样可以让内容自适应高度。在mounted生命周期中,我们使用uni.createSelectorQuery()获取每个tab-content的高度,保存在tabHeight数组中,然后在模板中使用style绑定动态高度,实现高度自适应。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值