无法动态设置scroll-view的高度

<template>

<view>

<view class="uni-grid-12">

<view class="uni-grid-12-item" v-for="(item,index) in menus" :key="index" :class="index % 4 === 2 ? 'no-border-right' : ''"

@click="tapMenu(item)">

<text class="uni-grid-12-image" :class="item.fonttext" style="font-size:28px;text-align: center;margin-bottom: 15px;"

style="item.fontcolor"></text> <text class="uni-grid-12-text">{{item.name}}</text>
</view>
</view>

<scroll-view id="contentScroll" scroll-y @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll"  

scroll-into-view="toView" :scroll-top="scrollTop" :style="this.contentStyle"> <view class="uni-card">
<view class="uni-list">
<view class="uni-list-cell uni-collapse">
<view class="uni-media-list uni-list-cell-navigate uni-navigate-right">
<image class="uni-home-list-logo" src="../../static/messageHL.png"></image>
<view class="uni-media-list-body">
<view style="font-size: 12px;" hover-class="uni-list-cell-hover" v-for="(list,index) in messages" :key="index"
@click="trigerCollapse(index)">
{{list.name}}
</view>
</view>
</view>
</view>
</view>
</view>
<view class="uni-card" v-for="(list,index) in news" :key="index">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-media-list">
<view class="uni-media-list-body">
<view class="uni-media-list-text-top uni-ellipsis">{{list.title}}</view>
<view class="uni-media-list-text-bottom">
<text>{{list.source}}</text>
<text>{{list.createtime}}</text>
</view>
</view>
</view>
</view>
</view>
</view>

</scroll-view>  

</view>
</template>
<script>
export default {
data() {
return {
menus: [{
name: '项目管理',
fonttext: 'iconfont icon-subway',
fontcolor: 'color:blue',
url: '/pages/project/project'
}, {
name: '勘察设计',
fonttext: 'iconfont icon-connectdevelop',
fontcolor: 'color:#d4237a',
url: 'mpvue-picker'
}, {
name: '施工工区',
fonttext: 'iconfont icon-neirong',
fontcolor: 'color:#1296db',
url: 'mpvue-picker'
}, {
name: '施工记录',
fonttext: 'iconfont icon-rizhi',
fontcolor: 'color:#1afa29',
url: 'mpvue-picker'
}, {
name: '企业管理',
fonttext: 'iconfont icon-qiyeguanli2',
fontcolor: 'color:#d4237a',
url: 'mpvue-picker'
}, {
name: '地质系统',
fonttext: 'iconfont icon-chartpartten',
fontcolor: 'color:#8a9a83',
url: '/pages/tgis/index'
}, {
name: '仪器管理',
fonttext: 'iconfont icon-tachometer',
fontcolor: 'color:#d4237a',
url: 'mpvue-picker'
}, {
name: '更多',
fonttext: 'iconfont icon-gengduo2',
fontcolor: 'color:#1296db',
url: 'mpvue-picker'
}],
messages: [{
name: 'DK145+245处上传了掌子面素描报告',
fonttext: 'iconfont icon-scan',
fontcolor: 'color:blue',
url: 'mpvue-picker'
}, {
name: '掌子面素描DK456+789处有黄色预警',
fonttext: 'iconfont icon-xiaoxi',
fontcolor: 'color:#d4237a',
url: 'mpvue-picker'
}],
news: [{
title: '隧道施工进度及成本动态预测与控制',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}, {
title: '安全生产月，质量安全从这里抓起',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}, {
title: '安全生产月，这份员工安全行为手册必备',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}, {
title: '地质信息系统小程序上线，开启隧道信息化管理新模式',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}, {
title: '【汶川十年】深埋隧道地震响应计算方法',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}, {
title: '【汶川十年】隧道抗震设计思考',
source: '成都天佑智隧科技有限公司',
createtime: '2018:12:05 17:52',
url: 'mpvue-picker'
}],
contentStyle: "height:340px",
}
},
mounted: function() {
var windowHeight = uni.getSystemInfoSync().windowHeight;
this.contentStyle = "height:" + (windowHeight - 181 - 120 - 63.5) + "px";
console.log(this.contentStyle);
},
onReady: function() {
console.log("onReady");
let view = uni.createSelectorQuery().select(".uni-grid-12");
view.fields({
size: true
}, data => {
console.log("得到节点信息" + JSON.stringify(data));
console.log("节点的高为" + data.height);
var windowHeight = uni.getSystemInfoSync().windowHeight;
var model = uni.getSystemInfoSync().model;
if (model.indexOf("iphone") > -1) {
this.contentStyle = windowHeight - data.height - 64;
} else {
this.contentStyle = windowHeight - data.height - 63.5;
}
console.log(this.contentStyle);
}).exec();
},
onLoad() {
console.log("onLoad");
console.log(this.$indexContent);
},
onShareAppMessage() {
return {
title: '欢迎体验uni-app',
path: '/pages/tabBar/component/component'
}
},
onPullDownRefresh: function() {
console.log("下拉刷新");
},
onNavigationBarButtonTap(e) {
var index = e.index;
console.log("点击了导航栏的按钮：" + index + "," + JSON.stringify(e));
console.log("点击了哪一个:" + e.index);
switch (parseInt(index)) {
case 0:
uni.navigateTo({
url: '/pages/common/robot'
})
break;
case 1:
this.scanCode();
break;
}
},
methods: {
upper: function(e) {
console.log("upper:" + e)
},
lower: function(e) {
console.log("lower:" + e)
},
scroll: function(e) {
//console.log("scroll:" + e)
},
toView: function(e) {
console.log("toView:" + e)
},
scrollTop: function(e) {
console.log("scrollTop:" + e)
},
trigerCollapse(e) {
if (!this.lists[e].pages) {
this.goDetailPage(this.lists[e].url);
return;
}
for (var i = 0; i < this.lists.length; ++i) {
if (e === i) {
this.lists[i].open = !this.lists[e].open;
} else {
this.lists[i].open = false;
}
}
},
tapMenu(e) {
uni.navigateTo({
url: e.url
})
},
goDetailPage(e) {
if (typeof e === 'string') {
uni.navigateTo({
url: '/pages/component/' + e + '/' + e
})
} else {
uni.navigateTo({
url: e.url
})
}
},
scanCode: function() {
uni.scanCode({
onlyFromCamera: true,
success: function(res) {
console.log(res.result);
uni.showToast({
title: res.result
})
},
fail: function(res) {
console.log(res.result);
}
})
}
}
}
</script>

<style>
page {
height: auto;
min-height: 100%;
}

.uni-card {  
    box-shadow: none;  
}  

.uni-list:after {  
    height: 0;  
}  

.uni-list:before {  
    height: 0;  
}  

.uni-media-list-body {  
    height: auto;  
    justify-content: space-around;  
}  

.uni-media-list-text-top {  
    height: 74upx;  
    font-size: 28upx;  
    overflow: hidden;  
}  

.uni-media-list-text-bottom {  
    display: flex;  
    flex-direction: row;  
    justify-content: space-between;  
}  

</style>