uni-app 获取 scroll-view高度 获取页面剩余高度 所占手机屏幕的剩余高度
uni-app 获取自定义可视化高度1.问题场景直接上图 我想获取下面的view 可视化高度下边图片标记的框保证数据多时,内容可以滑动 做到看视频时 可以看到下方内容。2.解决思路从上图可见使用页面的总体高度 - 减去 标题的红框上方的高度(多余高度)即可解决此类问题。也就是说height = pageHeight - otherHeight;3.官网描述(动态获取节点信息...
·
uni-app 获取自定义可视化高度
1.问题场景
直接上图 我想获取下面的view 可视化高度
下边图片标记的框保证数据多时,内容可以滑动 做到看视频时 可以看到下方内容。
2.解决思路
从上图可见 使用页面的总体高度 - 减去 标题的红框上方的高度(多余高度)即可解决此类问题。
也就是说 height = pageHeight - otherHeight;
3.官网描述(动态获取节点信息)
4.示例代码
完整代码示例贴出 js 部分代码省略 根据实际需求来复制。
<template>
<view style="position: fixed;">
<view style="width: 750upx;height: 423upx;" class="myVideoaaa">
<video id="myVideo" style="width: 750upx;height: 423upx;" :src="videoUrl" @error="videoErrorCallback" :danmu-list="danmuList"
enable-danmu danmu-btn controls></video>
</view>
<scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper"
@scroll="scroll" @touchstart="touchstart" @touchend="touchend">
<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 0">
<view v-for="(item,index) in 20" :key="index">
aaaa{{index}}
</view>
</scroll-view>
<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 1">
<view v-for="(item,index) in 20" :key="index">
bbbb{{index}}
</view>
</scroll-view>
<scroll-view scroll-y="true" class="table-content" :style="{height:height}" v-show="initIndex === 2">
<view v-for="(item,index) in 20" :key="index">
cccc{{index}}
</view>
</scroll-view>
</scroll-view>
</view>
</template>
<script>
// ........
onReady: function(res) {
// #ifndef MP-ALIPAY
this.videoContext = uni.createVideoContext('myVideo')
// #endif
var _this = this;
uni.getSystemInfo({
success: (resu) => {
const query = uni.createSelectorQuery()
query.select('.purchase-body').boundingClientRect()
query.exec(function(res) {
_this.height = resu.windowHeight - res[0].top + 'px';
console.log('打印页面的剩余高度', _this.height);
})
},
fail: (res) => {}
})
},
// ........
</script>
<style lang='scss'>
// ........
.table-content {
border: 1px red solid;
overflow-y: scroll;
}
// ........
</style>
4.注意点
1.高度计算 必须等 dom元素出来后才可以计算,元素都没出来 无法计算,计算放在onReady 函数中 。
2.注意你所使用的高度单位 是 upx rpx px 还是什么,计算出来的单位 为 px 不用转化 直接使用即可。
3.计算代码写完后,需要测试app h5 微信小程序是否可以适配。
如有错误,欢迎评论下方指出,如有问题 联系 qq 1019011560 。
更多推荐
已为社区贡献9条内容
所有评论(0)