uniapp 分割线组件如何使用

在uniapp中如何使用分割线组件？有没有具体的代码示例和配置参数说明？我在官方文档里没找到相关组件，是需要自己写样式还是通过第三方插件实现？求教大家常用的实现方法。

2 回复

在uniapp中，使用<view class="uni-divider"></view>即可添加分割线。可通过CSS自定义样式，如颜色、粗细等。简单易用，适合页面布局分隔。


在 UniApp 中，分割线组件通常使用 <view> 结合样式实现，或使用第三方 UI 库（如 uView、ColorUI）的预定义组件。以下是两种常用方法：

1. 使用 <view> 自定义分割线

通过设置样式（如背景色、高度、边距）创建分割线。

示例代码：

<template>
  <view>
    <text>上方内容</text>
    <!-- 基础分割线 -->
    <view class="divider"></view>
    <text>下方内容</text>
    
    <!-- 带文字的分割线 -->
    <view class="divider-with-text">
      <text class="divider-text">分割文字</text>
    </view>
  </view>
</template>

<style>
.divider {
  height: 1rpx; /* 分割线高度 */
  background-color: #e0e0e0; /* 颜色 */
  margin: 20rpx 0; /* 边距 */
}

.divider-with-text {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.divider-with-text::before,
.divider-with-text::after {
  content: "";
  flex: 1;
  height: 1rpx;
  background: #ccc;
}

.divider-text {
  padding: 0 20rpx;
  color: #999;
  font-size: 24rpx;
}
</style>

2. 使用 uView UI 库的分割线

若项目已集成 uView UI，可直接使用 <u-divider> 组件。

安装 uView（如未安装）：

npm install uview-ui

在 main.js 中引入：

import uView from 'uview-ui';
Vue.use(uView);

示例代码：

<template>
  <view>
    <text>上方内容</text>
    <!-- 基础分割线 -->
    <u-divider></u-divider>
    <!-- 带文字的分割线 -->
    <u-divider text="分割文字"></u-divider>
    <!-- 自定义样式 -->
    <u-divider 
      text="自定义颜色" 
      lineColor="#ff0000" 
      textColor="#007aff"
    ></u-divider>
  </view>
</template>

参数说明（uView 示例）

  • text：分割线中间的文字。
  • lineColor：线条颜色。
  • textColor：文字颜色。
  • dashed：是否使用虚线（布尔值）。

总结

  • 轻量需求：直接用 <view> 配合样式实现。
  • 复杂场景：推荐使用 uView 等库，节省开发时间。

根据项目需求选择合适的方式即可。

回到顶部