UniApp中的UL还能用吗？

1. UniApp中的UL标签

在前端开发中，我们难免会遇到有关列表的处理，而最常用的标签就是UL（无序列表）和OL（有序列表）。在UniApp中，我们通常使用Uni UI中封装好的组件，如uni-list、uni-grid等，但是UL标签本身也可以使用，只是需要在样式中进行一些调整。

1.1 UL标签的基础使用

UL标签用于创建无序列表，通过添加LI（列表项）标签来表示列表中的每一项。下面是一个基本的UL示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

以上代码可以在页面中展示出一个简单的无序列表，如下所示：

列表项1

列表项2

列表项3

1.2 样式调整

默认情况下，UL列表会带有一些默认的样式，如左边距、列表项标记等。如果我们需要自定义样式，可以使用CSS对UL进行调整。下面是一个例子：

ul {
  list-style: none;
  padding-left: 0;
}
li {
  padding-left: 1em;
  text-indent: -1em;
  margin-bottom: 0.5em;
}

在以上代码中，我们通过对UL和LI进行不同的样式调整，达到了自定义列表的目的。解释如下：

list-style: none;：去除默认的列表项标记。

padding-left: 0;：去除默认的左边距。

padding-left: 1em;：设置每个列表项左侧的缩进。

text-indent: -1em;：通过负值的缩进，将文字对其到列表项开始的位置。

margin-bottom: 0.5em;：设置每个列表项之间的间距。

通过以上样式调整，我们可以得到一个更加美观的UL列表，如下所示：

• 列表项1

• 列表项2

• 列表项3

  2. UniApp中的UL与CSS框架

  在实际开发中，我们通常会使用CSS框架来快速搭建页面，如Bootstrap、Element UI等。这些框架通常都会包含UL和LI等列表标签，并且样式也已经进行了封装。在UniApp中，我们同样可以使用这些框架，只需要在App.vue或Main.vue中引入相应的CSS文件即可。下面以Element UI为例，展示如何在UniApp中使用其UL组件：

  2.1 引入Element UI

  要使用Element UI的UL组件，首先需要安装Element UI，并将其引入项目中。具体操作如下：

  
  // 安装Element UI
  npm i element-ui
  // 在App.vue中引入样式文件
  <style>
    @import 'element-ui/lib/theme-chalk/index.css';
  </style>
  

  2.2 使用UL组件

  在引入样式文件后，就可以在页面中使用Element UI的UL组件了。相关代码如下：

  
  <template>
    <el-row>
      <el-col>
        <el-card>
          <el-header>列表示例</el-header>
          <el-main>
            <el-row>
              <el-col>
                <el-list>
                  <el-list-item>列表项1</el-list-item>
                  <el-list-item>列表项2</el-list-item>
                  <el-list-item>列表项3</el-list-item>
                </el-list>
              </el-col>
            </el-row>
          </el-main>
        </el-card>
      </el-col>
    </el-row>
  </template>
  

  以上代码中，我们使用了Element UI的el-row、el-col、el-card、el-list、el-list-item等组件来构建页面，并展示出了一个包含三个列表项的UL列表。效果如下所示：

  3. 小结

  UL标签在前端开发中是一个非常重要的标签，用于创建无序列表。虽然在UniApp中我们通常使用Uni UI中封装好的组件来处理列表，但是在一些特殊场合下，UL标签仍然是一个不错的选择。同时，在使用CSS框架时，也需要注意在UniApp中引入相关的样式文件。