uniapp中画横线

在uniapp中绘制横线的方法

使用view标签加样式

通过设置view标签的样式，可以快速实现横线效果。以下是一个简单的示例：

<view style="height: 1px; background-color: #e5e5e5;"></view>

这种方式简单直接，通过设置高度和背景色就能创建一条横线。

使用border属性

利用CSS的border属性也能实现横线效果：

<view style="border-bottom: 1px solid #e5e5e5;"></view>

这种方法适合需要与文本或其他内容结合的场合，会自动根据内容宽度调整横线长度。

使用uni-ui的divider组件

如果项目中使用uni-ui，可以直接使用其提供的divider组件：

<uni-divider></uni-divider>

这个组件提供了更多自定义选项，如设置颜色、粗细、文字等。

使用SVG绘制

对于需要更复杂样式的横线，可以使用SVG：

<svg height="1" width="100%">
  <line x1="0" y1="0" x2="100%" y2="0" style="stroke:#e5e5e5;stroke-width:1" />
</svg>

这种方法可以实现渐变、虚线等特殊效果。

注意事项

• 移动端需要考虑Retina屏幕，适当增加线宽避免模糊
• 横线颜色应与整体设计风格协调
• 横线宽度可根据实际需求设置为固定值或百分比