uni-app公共样式怎么引用

要在uni-app中使用公共样式，可以在 `App.vue` 中的 `<style>` 标签中定义公共样式，然后在需要使用的组件中通过 `@import` 引用即可。具体步骤如下：

1. 在 `App.vue` 中定义公共样式，例如：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<style>
  /* 公共样式 */
  .text-red {
    color: red;
  }
</style>

2. 在需要使用公共样式的组件中，通过 `@import` 引入公共样式，例如：

<template>
  <div class="text-red">
    这段文字将会显示为红色
  </div>
</template>

<style lang="scss">
  /* 引入公共样式 */
  @import "@/App.vue";

  /* 组件自己的样式 */
  .my-component {
    font-size: 16px;
  }
</style>

这样，在需要使用公共样式的组件中就可以直接使用公共样式了。需要注意的是，引用公共样式时，需要使用 `@import`，并且路径需要以 `@` 开头，表示引用项目根目录下的文件。

相关问题

uniapp文件结构

uni-app的文件结构包括以下几个主要部分：

1. manifest.json：这是应用的配置文件，用于指定应用的名称、图标、权限等。

2. pages.json：这个文件用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

3. uni.scss：这个文件的作用是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量。

4. components：这个文件夹用于存放公共组件，可以在不同的页面中复用。

除了以上几个主要部分，uni-app的文件结构还包括其他一些文件和文件夹，例如：

- pages文件夹：用于存放应用的页面文件，每个页面通常由一个vue文件组成。

- static文件夹：用于存放静态资源文件，例如图片、字体等。

- App.vue：这是应用的根组件，所有页面都会被渲染到这个组件中。

- main.js：这是应用的入口文件，用于初始化应用并加载根组件。

- uni_modules文件夹：用于存放uni-app的插件和扩展模块。

- unpackage文件夹：用于存放打包后的应用文件。

以上是uni-app的基本文件结构，通过这些文件和文件夹可以组织和管理uni-app应用的各个部分。

uniapp如何封装一个公共的列表页面

在 uni-app 中，可以使用组件的方式来封装一个列表页面。

具体步骤如下：

1. 创建一个新的组件文件，在组件中定义一个接收 props 的模板。props 中可以包含列表数据和其他相关的配置项。

2. 在组件中使用 v-for 指令来渲染列表数据。在模板中，可以使用 props 中的配置项来决定列表的布局、样式等等。

3. 在组件的 script 部分中，定义好组件的 props 和其他相关的逻辑。

4. 在需要使用列表的页面中引入该组件，并传入所需的 props 即可。

示例代码如下：

<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    // 其他相关逻辑
  }
}
</script>

在使用该组件的页面中，可以这样调用：

<template>
  <view>
    <common-list :list="myList"></common-list>
  </view>
</template>

<script>
import CommonList from './common-list.vue'

export default {
  components: {
    CommonList
  },
  data() {
    return {
      myList: [
        { name: 'item1' },
        { name: 'item2' },
        { name: 'item3' }
      ]
    }
  }
}
</script>

希望这些信息能帮助到你。