uniapp中, 样式变量, 只支持color等属性, 但不支持height属性? 求验证

分类：uni-app

以下是我的代码,
我自已验证是: color属性是没有问题, 但height属性, 则没有任何效果
(如果去掉height变量, 手工输入高度,则有效)

<template>    
  <view>    
    <view :style="myVarStyle" class="aa">测试</view>    
  </view>    

</template>    

<script>    
  export default {    
    name: "test",    
    data() {    
      return {    

        myVarStyle: {    
          '--aaa':'green',    
          '--bbb':'200rpx',    
        },    

      };    
    },    

  }    
</script>    

<style>    

  .aa{    
    background-color: #ddd;    
    color:  var(--aaa);    
    height: var(--bbb);    
  }    
</style>

2023-03-11 11:57 负责人:无分享

4 个回复

一顾倾人诚

我这没问题

1***@qq.com (作者)

我执行的效果如下:
还有其它朋友可以帮忙试验反馈一下吗?

一顾倾人诚

我怀疑是你写法的问题

2023-03-14 10:49
1***@qq.com (作者)

回复一顾倾人诚: 没有,我刚刚测试时,是写错了.

已更新图了

2023-03-14 10:50
1***@qq.com (作者)

我刚才测试时, 试图再把RPX改一下. 所以截图也截得不好.

我马上就发现, 并更正了.

现在, 是正确的问题表述了.

2023-03-14 10:51
1***@qq.com (作者)

这位大哥, 你帮忙在你电脑上试一下, 并截图出来看一下, 非常感谢

2023-03-14 10:52
一顾倾人诚

:style="{ '--height': $u.addUnit(calcheight, 'px') }" 我这样没问题

2023-03-14 10:55
1***@qq.com (作者)

回复一顾倾人诚: 非常感谢,那我百度一下你这种方式,我尝试改一下看看.

2023-03-14 10:55
一顾倾人诚

回复 1***@qq.com: 或者你用scss 试试我也不清楚反正我这里是没有问题的

2023-03-14 10:59

1***@qq.com (作者)

感谢楼上这位大哥指点,我也按你的方法成功了!!!!!!!!!

特此分享一下, 避免后来人掉坑

<template>    
  <view>    
    <view style="background-color: #ddd;" :style="{height: addUnit(myHeight)}">测试一下</view>   
  </view>    

</template>    

<script>    

  export default {    
    name: "test",    
    data() {    
      return {    
        myHeight: 200  
      };    
    },   

    methods:{  
      addUnit(num){  
        if(!num) return 0;  
        if(typeof(num) === 'number') return num + 'rpx';  
        return num  
      },  
    },  

  }    
</script>    

<style>    

</style>

1***@qq.com (作者)

可以更简单点, 这样写就行

一顾倾人诚

$u.addUnit(calcheight, 'px') 这个是 uview 中的一个函数,可以对传进来的数据单位处理当然可以不用它

2023-03-14 12:03

要回复问题请先登录或注册

uniapp中, 样式变量, 只支持color等属性, 但不支持height属性? 求验证

4 个回复

公告

相关问题

uniapp中, 样式变量, 只支持color等属性, 但不支持height属性? 求验证

与内容相关的链接

4 个回复

公告

相关问题