微信小程序 样式绑定问题

Question

<view class="content" style="{{themePoster.length==0?'background-image:url(/images/ddaitp.png)':'background-image: url({{imageurl}}{{curPageBg}})'}}"></view>

在微信小程序中的样式中想使用 绑定的方式取背景图片 url({{imageurl}}{{curPageBg}})'}} 这个绑定的不生效

Answer 1

引自免费微信小程序：皆我百晓生

在微信小程序中，你遇到的问题可能是因为在style属性中嵌套了两个{{ }}导致解析错误。当在一个属性值中需要使用{{ }}时，通常只需要一个，将变量名写入其中即可。在这种情况下，你可以尝试调整一下style属性的写法，去掉多余的{{ }}。下面是修改后的代码示例：

<view class="content" :style="{ 'background-image': `url(${imageurl}${curPageBg})` }"></view>

这里使用的是微信小程序的:style指令，它允许你在JavaScript表达式中动态设置样式。注意，这里的字符串插值是使用反引号(``)包裹，并且在内部使用 ${} 来引用变量。

如果你仍然遇到问题，确保imageurl和curPageBg这两个数据在你的页面实例中已经正确赋值。你可以在data对象中定义它们，例如：

data: {
  imageurl: 'http://example.com/images/', // 图片URL前缀
  curPageBg: 'ddaitp.png', // 当前页背景图文件名
},

这样，你的整个页面结构可能看起来像这样：

<template>
  <page>
    <swiper>
      <!-- Swiper items... -->
    </swiper>
    <view :style="{ 'background-image': `url(${imageurl}${curPageBg})` }" class="content">.</view>
    <tab-bar>
      <view class="navBar">.</view>
    </tab-bar>
  </page>
</template>

<script>
export default {
  data() {
    return {
      imageurl: 'http://example.com/images/',
      curPageBg: 'ddaitp.png',
    };
  },
};
</script>

<style scoped>
.content {
  /* Add any other styles you need for the content view */
}
</style>

这段代码应该可以解决你的背景图片绑定问题。如果还有其他问题，欢迎继续提问。