闫明
闫明
  • 发布:2018-12-06 12:14
  • 更新:2019-04-01 14:43
  • 阅读:13201

uniapp scroll-view 能设置动态高度吗

分类:uni-app

uniapp scroll-view 能设置动态高度吗

2018-12-06 12:14 负责人:无 分享
已邀请:
7***@qq.com

7***@qq.com

onReady: function () {
//获取屏幕高度及比例
var winInfo = uni.getSystemInfo({
success: function (res) {
var windowHeight = res.windowHeight;
//获取底部标题高度
var dom = uni.createSelectorQuery().select('#grace-tab-title')
dom.fields({size: true}, res2 => {
if(!res2){return ;}
//计算得出滚动区域的高度
_self.tabHeight = windowHeight - res2.height;
}).exec();
}
});
},

m***@95jw.cn

m***@95jw.cn

可以设置的,css设置即可,某些情况下,需要提前用view撑高,但是建议用onready那生命周期

l***@163.com

l***@163.com

这样写好像不需要设置高度:
<template>
<view class="uni-tab-bar">
<view class="uni-swiper-tab"></view>
<view class="swiper-box">
<scroll-view scroll-y class="list">
<view style="height: 800upx; background-color: #007AFF;"><text>asdfsas</text></view>
<view style="height: 800upx; background-color: #FFB511;"><text>asdfsas</text></view>
</scroll-view>
</view>
</view>
</template>

<script>
export default {
data() {
return {};
}
};
</script>

<style lang="scss">
page {
height: 100%;
}
.uni-tab-bar {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
}

.uni-tab-bar .list {
width: 750upx;
height: 100%;
}

.uni-swiper-tab {
width: 100%;
white-space: nowrap;
line-height: 100upx;
height: 100upx;
border-bottom: 1px solid #c8c7cc;
}

.uni-tab-bar .swiper-box {
flex: 1;
width: 100%;
height: calc(100% - 100upx);
}
</style>

该问题目前已经被锁定, 无法添加新回复