先看看错误的范例代码,当你单步调试onLoad里面的代码时,能够输
出我们想要的结果,但这样的写法不能让正确的动态样式绑定生效:
<template>
<view class="content" :style="{ height: wagesheight + 'px' }">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
wagesheight:0
}
},
onLoad() {
uni.getSystemInfo({
success:function(res){
console.log(res.windowHeight);// print 610
this.wagesheight = uni.upx2px(res.windowHeight)
console.log(this.wagesheight);// print 292
}
})
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #4CD964;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
在我们使用uni.getSystemInfo获取系统属性值时,我们必须定义
一个函数,将uni.getSystemInfo包装到自定义函数中,将需要的属
性值 必须从自定义函数中返回,这样样式动态绑定就会立即生效,
正确的代码如下:
<template>
<view class="content" :style="{ height: wagesheight + 'px' }" >
<image class="logo" src="/static/logo.png"></image>
<view class="text-area" >
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
wagesheight: 0
}
},
onLoad() {
this.wagesheight = this.getData()
console.log(this.wagesheight);
},
methods: {
getData(){
var result = 0;
uni.getSystemInfo({
success: function(res) {
console.log(res.windowHeight);// print 610
result = uni.upx2px(res.windowHeight) + 200 // 这里加200或者加100为了看测试效果
// 不加200默认 return 292
}
});
return result;
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #4CD964;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
再列举一个在uni-app项目中使用uni.getSystemInfoSync()同步函数
获得的系统参数属性值绑定到动态样式上让动态样式生效的范例
<template>
<view class="content" :style="{ height: wagesheight + 'px' }">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
wagesheight:0
}
},
onReady() {
/*
// 这是错误获取windowHeight属性值的方式,因为此值没有被自定义的函数包装return返回,动态样式绑定没法生效
uni.getSystemInfo({
success:function(res){
console.log(res.windowHeight);
this.wagesheight = uni.upx2px(res.windowHeight) + 200
console.log(this.wagesheight);// print 292px
}
})
*/
// 下面这行代码写到onLoad()里面动态样式绑定生效啦,uni.getSystemInfoSync()是同步方法
//this.wagesheight = uni.upx2px(uni.getSystemInfoSync().windowHeight) + 200
}
,
onLoad() {
// 此行代码写到onReady()里面动态样式绑定生效啦,uni.getSystemInfoSync()是同步方法
this.wagesheight = uni.upx2px(uni.getSystemInfoSync().windowHeight) + 200
},
methods: {
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #4CD964;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>