1***@qq.com
1***@qq.com
  • 发布:2023-03-11 11:57
  • 更新:2023-03-14 11:28
  • 阅读:295

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 负责人:无 分享
已邀请:
一顾倾人诚

一顾倾人诚

我这没问题

1***@qq.com

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

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

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

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

  • 一顾倾人诚

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


    2023-03-14 12:03

要回复问题请先登录注册