uniapp分割线组件如何使用

在uniapp中如何使用分割线组件？有没有具体的代码示例？我想实现不同样式的分割线效果，比如虚线或者自定义颜色，但官方文档里没有找到详细的说明。求教各位大佬！

2 回复

在uni-app中使用分割线组件，只需在template中添加<view class="uni-divider"></view>即可。可通过添加<view class="uni-divider__line"></view>自定义样式，或使用<uni-divider>官方扩展组件实现更多功能。


在 UniApp 中，可以使用 <view> 结合样式来实现分割线组件。以下是几种常见方法：

1. 基础水平分割线

<view class="divider"></view>

.divider {
  height: 1rpx;
  background-color: #e0e0e0;
  margin: 20rpx 0;
}

2. 带文字的分割线

<view class="divider-with-text">
  <view class="divider-line"></view>
  <text class="divider-text">分割文字</text>
  <view class="divider-line"></view>
</view>

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

.divider-line {
  flex: 1;
  height: 1rpx;
  background-color: #e0e0e0;
}

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

3. 垂直分割线

<view class="vertical-divider"></view>

.vertical-divider {
  width: 1rpx;
  height: 30rpx;
  background-color: #e0e0e0;
  margin: 0 20rpx;
}

4. 虚线分割线

<view class="dashed-divider"></view>

.dashed-divider {
  height: 1rpx;
  background: repeating-linear-gradient(
    to right,
    #e0e0e0 0%,
    #e0e0e0 50%,
    transparent 50%,
    transparent 100%
  );
  background-size: 10rpx 1rpx;
  margin: 20rpx 0;
}

使用技巧：

  • 调整 margin 控制分割线间距
  • 修改颜色值改变分割线颜色
  • 调整高度/宽度控制线条粗细
  • 可使用 rpx 单位保证各端适配

这些方法简单实用，能满足大部分分割线需求。

回到顶部