uni-app script标签在setup语法糖模式下v-bind动态绑定样式值无效

uni-app script标签在setup语法糖模式下v-bind动态绑定样式值无效

操作步骤：

<script setup>  
    import { ref } from 'vue'  
    const bottom = ref('100px')  
</script>  
<style lang="scss" scoped>  
    .add-Shopping{  
        background-color: #fff;  
        width: 100vw;  
        border-radius:  15rpx 15rpx 0 0;  
        position: relative;  
        padding-bottom: v-bind(bottom);  
    }  
</style>

预期结果：

  • 动态绑定bottom的值

实际结果：

  • 实际渲染没有读取bottom设定的值

bug描述：

  • script标签在setup语法糖模式下v-bind动态绑定样式值无效

图片

Image 1 Image 2 Image 3 Image 4

项目信息

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境 Mac
操作系统版本 12.0.1
开发工具类型 HBuilderX
开发工具版本 3.3.2
第三方工具版本 1.05.2111300
基础库版本 2.21.2
项目创建方式 HBuilderX

更多关于uni-app script标签在setup语法糖模式下v-bind动态绑定样式值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

已确认修复，等待发版，https://github.com/dcloudio/uni-app/commit/075271d33b4badea40293df567c344a43af311e2

更多关于uni-app script标签在setup语法糖模式下v-bind动态绑定样式值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 setup 语法糖模式下，v-bind 在 <style> 中动态绑定样式值确实存在一些限制。根据你的代码和描述，问题可能出在以下方面：

  1. 平台兼容性：v-bind 在 CSS 中动态绑定变量是 Vue 3.2+ 的特性，但在 uni-app 中，部分平台（尤其是小程序）可能不支持这种写法。小程序端样式是静态编译的，无法在运行时动态绑定 CSS 变量。

  2. 正确写法：在 uni-app 中，动态样式推荐通过行内样式或计算属性实现。例如，将你的代码修改为：

    <template>
  <view class="add-Shopping" :style="{ paddingBottom: bottom }"></view>
</template>
<script setup>
  import { ref } from 'vue'
  const bottom = ref('100px')
</script>
<style lang="scss" scoped>
  .add-Shopping {
    background-color: #fff;
    width: 100vw;
    border-radius: 15rpx 15rpx 0 0;
    position: relative;
  }
</style>

    这样通过 :style 绑定动态值，兼容性更好。

  3. 检查版本：确保你的 @vue/composition-api 或 Vue 3 版本支持该特性。同时，HBuilderX 3.3.2 对 Vue 3 的支持可能仍有部分限制，建议更新到最新版本测试。

  4. 替代方案：如果必须使用 CSS 变量，可以尝试通过行内样式定义 CSS 变量，再在样式中引用：

    <template>
  <view class="add-Shopping" :style="{ '--bottom': bottom }"></view>
</template>
<style lang="scss" scoped>
  .add-Shopping {
    padding-bottom: var(--bottom);
  }
</style>
回到顶部