uniapp 表单分割线如何实现

在uniapp开发中，如何给表单添加分割线？比如在input或picker组件之间加入横线分隔，类似HTML中的

效果。尝试过用border-bottom但样式不理想，是否有更优雅的实现方式？最好能兼顾不同平台的表现一致性。

2 回复

在uniapp中，可以通过以下方式实现表单分割线：

  1. 使用<view>标签设置边框：
<view style="border-bottom: 1px solid #eee;"></view>
  1. 使用<divider>组件（需要引入）：
<divider></divider>
  1. 使用<u-line>组件（uView UI库）：
<u-line></u-line>

推荐第一种方式，简单实用，无需额外依赖。


在 UniApp 中，可以通过以下方法实现表单分割线：

方法一：使用 view 元素 + CSS 样式

<template>
  <view class="form-container">
    <view class="form-item">
      <text class="label">姓名</text>
      <input class="input" placeholder="请输入姓名" />
    </view>
    
    <!-- 分割线 -->
    <view class="divider"></view>
    
    <view class="form-item">
      <text class="label">手机号</text>
      <input class="input" placeholder="请输入手机号" />
    </view>
    
    <view class="divider"></view>
    
    <view class="form-item">
      <text class="label">邮箱</text>
      <input class="input" placeholder="请输入邮箱" />
    </view>
  </view>
</template>

<style scoped>
.form-container {
  padding: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
}

.label {
  width: 150rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
}

/* 分割线样式 */
.divider {
  height: 1rpx;
  background-color: #e0e0e0;
  margin: 10rpx 0;
}
</style>

方法二：使用 border 实现

<template>
  <view class="form-container">
    <view class="form-item">
      <text class="label">姓名</text>
      <input class="input" placeholder="请输入姓名" />
    </view>
    
    <view class="form-item with-border">
      <text class="label">手机号</text>
      <input class="input" placeholder="请输入手机号" />
    </view>
    
    <view class="form-item with-border">
      <text class="label">邮箱</text>
      <input class="input" placeholder="请输入邮箱" />
    </view>
  </view>
</template>

<style scoped>
.form-container {
  padding: 20rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
}

.with-border {
  border-top: 1rpx solid #e0e0e0;
}

.label {
  width: 150rpx;
  font-size: 28rpx;
}

.input {
  flex: 1;
  font-size: 28rpx;
}
</style>

方法三：使用 uni-list 组件（推荐）

<template>
  <uni-list>
    <uni-list-item title="姓名">
      <input slot="footer" placeholder="请输入姓名" />
    </uni-list-item>
    
    <uni-list-item title="手机号">
      <input slot="footer" placeholder="请输入手机号" />
    </uni-list-item>
    
    <uni-list-item title="邮箱">
      <input slot="footer" placeholder="请输入邮箱" />
    </uni-list-item>
  </uni-list>
</template>

<script>
// 需要安装 uni-list 组件
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list/uni-list-item.vue'

export default {
  components: {
    uniList,
    uniListItem
  }
}
</script>

推荐使用方法一或方法三，方法一简单灵活，方法三使用官方组件更规范。分割线的颜色、粗细可以通过修改 CSS 中的 background-color 和 height 属性来调整。

回到顶部