uniapp的js控制css

在uniapp中，可以使用以下方法控制CSS：

1. 动态绑定class和style属性：

<template>
  <view :class="{ 'active': isActive }" :style="{ 'color': textColor }">
    Hello World!
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      textColor: 'red'
    }
  }
}
</script>

<style>
.active {
  font-weight: bold;
}
</style>

2. 使用ref获取元素，然后修改样式：

<template>
  <view ref="myView">Hello World!</view>
</template>

<script>
export default {
  mounted() {
    this.$refs.myView.style.color = 'red';
  }
}
</script>

<style>
/* 可以省略 */
</style>

需要注意的是，第二种方法需要在组件挂载后才能获取dom元素，因此需要在`mounted`生命周期钩子中调用。另外，建议使用第一种方法，因为它是更符合Vue的响应式数据绑定的方式。

相关问题

uniapp使用postcss-pxtorem

对于uniapp项目中使用postcss-pxtorem，你可以按照以下步骤进行配置：

1. 首先，安装相关依赖。在项目根目录下执行以下命令：

npm install postcss-pxtorem --save-dev

2. 在项目根目录中找到`postcss.config.js`文件（如果没有则新建一个），并进行如下配置：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度的十分之一，如果设计稿宽度是750，则这里设置为75
      propList: ['*'],
      selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器，使用.ignore类名可以忽略
    },
  },
};

可以根据实际需求修改`rootValue`的值，以及添加其他配置项。

3. 在`vue.config.js`文件中添加postcss配置：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 设计稿宽度的十分之一，如果设计稿宽度是750，则这里设置为75
            propList: ['*'],
            selectorBlackList: ['.ignore'], // 忽略转换的CSS选择器，使用.ignore类名可以忽略
          }),
        ],
      },
    },
  },
};

4. 配置完成后，重新启动uniapp项目，此时CSS中的px单位会自动转换为rem单位。

请注意，以上步骤适用于uniapp项目使用postcss-pxtorem进行px到rem的转换。如果你使用的是其他构建工具或框架，可能会有些许差异，请根据实际情况进行相应配置。

uniapp如何判断css背景图片是否加载完成

在uniapp中，可以使用`uni.getImageInfo`方法来判断图片是否加载完成。该方法可以获取图片信息，包括宽高等属性，如果能够获取到宽高，就说明图片加载完成了。

以下是一个示例代码：

uni.getImageInfo({
  src: '背景图片的 URL',
  success: function (res) {
    console.log('背景图片加载完成');
    // 在这里执行背景图加载完成后的操作
  },
  fail: function (res) {
    console.log('背景图片加载失败');
    // 在这里执行背景图加载失败后的操作
  }
})

在代码中，我们调用了`uni.getImageInfo`方法，并传入了背景图片的 URL。当图片加载完成时，会执行`success`回调函数，此时可以执行背景图加载完成后的操作。如果图片加载失败，则会执行`fail`回调函数，此时可以执行背景图加载失败后的操作。