style标签在uni-app中不能正确渲染

style标签在uni-app中不能正确渲染

类别 信息
产品分类 uniapp/小程序/字节跳动
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.3.1
HBuilderX类型 正式
HBuilderX版本号 4.45
第三方开发者工具版本号 4.3.7
基础库版本号 3.60.0.7
项目创建方式 HBuilderX

示例代码：

<view class="barrage-container" :style="getContainerStyle" v-show="barrageConfig.isShow">  
      <view v-for="barrage in barrageList" :key="barrage.id" class="barrage-item" :style="barrage.style">  
        {{ barrage.text }}  
      </view>  
    </view>  

computed: {  
    // 计算弹幕容器样式  
    getContainerStyle() {  
      const style = {  
        height: this.barrageConfig.position === "full" ? "300px" : "150px",  
      };  

      if (this.barrageConfig.position === "bottom") {  
        style.top = "150px";  
      }  

      return style;  
    },  
}

操作步骤：

~~

预期结果：

正确渲染style

实际结果：

标签上没有style

bug描述：

动态style不能正确渲染，


更多关于style标签在uni-app中不能正确渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

提供完整单页面源码。我使用下面打代码，在 vue3 抖音小程序上表现这个正常
<template>
<view>
<view @click=“toggle”>{{height300}}</view>
<view class="barrage-container" :style="getContainerStyle" v-show="height300">
123
</view>
</view>
</template>

<script> export default { data() { return { height300: false, } }, methods: { toggle() { this.height300 = !this.height300 } }, computed: { // 计算弹幕容器样式 getContainerStyle() { const style = { border:'1px solid red', height: this.height300 === true ? "300px" : "150px", }; return style; }, } } </script>

更多关于style标签在uni-app中不能正确渲染的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你也观察模拟器上的 html 倒是有没有 style 值，把结果说一下

在uni-app中动态绑定style时需要注意以下几点：

  1. 计算属性返回的样式对象需要转换为字符串格式，uni-app小程序端对对象形式的style支持有限。建议修改为：
getContainerStyle() {
  let style = '';
  style += `height:${this.barrageConfig.position === "full" ? "300px" : "150px"};`;
  
  if(this.barrageConfig.position === "bottom") {
    style += 'top:150px;';
  }
  
  return style;
}
  1. 确保barrageConfig和barrageList数据是响应式的，建议在data中初始化：
data() {
  return {
    barrageConfig: {
      isShow: false,
      position: 'full'
    },
    barrageList: []
  }
}
回到顶部