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 reset.css

### 如何在 UniApp 项目中正确使用 reset.css 文件

#### 创建并引入全局 CSS 文件

为了确保样式的统一性和跨浏览器兼容性，在 `app.vue` 中引入全局的 CSS 是必要的。这可以通过创建一个专门用于重置样式的 CSS 文件来实现。

/* src/common/css/reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

此部分代码展示了一种常见的 CSS 重设方法，旨在移除不同标签之间的默认样式差异[^3]。

#### 修改 App.vue 文件以加载自定义样式表

接下来是在应用入口文件 `app.vue` 中导入上述创建好的 `reset.css` 文件：

// src/App.vue
<template>
  <!-- 组件模板 -->
</template>

<script setup lang="ts">
// 脚本逻辑...
</script>

<style>
@import './common/css/uni.css';
@import './common/css/reset.css'; /* 加载重置样式 */

/* 其它全局样式... */
</style>

通过这种方式，可以在整个应用程序范围内生效这些重置规则，从而减少因浏览器间默认行为不一致而带来的麻烦[^1]。

对于更现代的方式，则可以选择像 UnoCSS 这样的工具来自动生成所需的类名和属性组合，进而达到更好的开发体验以及性能优化效果[^2]。

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的转换。如果你使用的是其他构建工具或框架，可能会有些许差异，请根据实际情况进行相应配置。