uview2.0form表单中borderBottom不生效

可能是由于 uView2.0 版本中的表单组件默认使用了内联样式，导致设置 border-bottom 样式不生效。您可以尝试在样式中使用 !important 来强制覆盖默认样式，例如：

.u-input__wrapper {
  border-bottom: 1px solid red !important;
}

如果仍未生效，您可以在表单组件上添加一个唯一的 class 名称，然后再使用这个 class 来设置样式。例如：

<u-form-item class="my-form-item">
  <u-input></u-input>
</u-form-item>

然后在样式中使用该 class 来设置样式：

.my-form-item .u-input__wrapper {
  border-bottom: 1px solid red !important;
}

相关问题

uview2.0 表单上一步 下一步

在uView 2.0中，可以通过 u-form 组件结合 u-step 步骤条组件来实现表单的上一步和下一步功能。

具体步骤如下：

1. 在页面中引入 u-form 和 u-step 组件。

2. 在 u-form 中使用 :model 绑定表单数据，使用 @submit 事件监听表单提交。

3. 在表单中添加多个 u-step-item 组件，每个组件对应一个表单页面。

4. 在 u-form 中添加 u-step 组件，并设置 :current 属性为当前表单页面的索引。

5. 在 u-step 中添加 u-step-item 组件，并设置 :title 属性为当前表单页面的标题，设置 :status 属性为当前表单页面的状态。

6. 在每个 u-step-item 组件中添加表单控件，如 u-input、u-radio 等。

7. 在每个 u-step-item 组件中添加 u-row 和 u-col 组件，用于设置控件的布局和样式。

8. 在每个 u-step-item 组件的底部添加 u-button 组件，用于提交表单或进入下一步。

9. 在每个 u-step-item 组件的顶部添加 u-button 组件，用于返回上一步。

10. 在 u-form 中添加两个 u-button 组件，分别用于提交表单和返回上一步。

通过以上步骤，就可以实现uView 2.0中表单的上一步和下一步功能。具体实现方式可以参考uView官方文档。

用uview2.0中表单组件写一个包含姓名、选择性别、上传头像、选择生日、选择地区、可以提交、可以重置的表单

好的，我可以帮你解决这个问题。

首先，你需要在uview2.0中引入表单组件，然后在页面中使用。你可以使用以下代码：

<template>
<view class="form">
<u-form :model="form" :rules="rules">
<u-form-item label="姓名" prop="name">
<u-input v-model="form.name"></u-input>
</u-form-item>
<u-form-item label="性别" prop="gender">
<u-radio-group v-model="form.gender">
<u-radio
v-for="(value, label) in genders"
:key="label"
:label="label"
>{{ value }}</u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="上传头像" prop="avatar">
<u-upload v-model="form.avatar" action="serverUrl"></u-upload>
</u-form-item>
<u-form-item label="生日" prop="birthday">
<u-date-picker v-model="form.birthday"></u-date-picker>
</u-form-item>
<u-form-item label="地区" prop="region">
<u-region-picker
v-model="form.region"
:list="regionList"
:placeholder="'请选择地区'"
></u-region-picker>
</u-form-item>
<u-form-item>
<u-button type="primary" @click="submitForm">
提交
</u-button>
<u-button type="danger" @click="resetForm">
重置
</u-button>
</u-form-item>
</u-form>
</view>
</template>

<script>
import { UForm, UFormItem, UInput, URadioGroup, URadio, UUpload, UDatePicker, URegionPicker, UButton } from 'uview-ui'

export default {
components: {
UForm,
UFormItem,
UInput,
URadioGroup,
URadio,
UUpload,
UDatePicker,
URegionPicker,
UButton,
},
data() {
return {
form: {
name: '',
gender: '',
avatar: '',
birthday: '',
region: '',
},
rules: {
name: [
{ required: true, message: '请输入姓名' },
{ min: 2, max: 10, message: '长度在2到10个字符' },
],
gender: [{ required: true, message: '请选择性别' }],
avatar: [{ required: true, message: '请上传头像' }],
birthday: [{ required: true, message: '请选择生日' }],
region: [{ required: true, message: '请选择地区' }],
},
genders: {
male: '男',
female: '女',
},
regionList: [
{
code: '110000',
name: '北京市',
children: [
{ code: '110100', name: '北京市' },
],
},
{
code: '120000',
name: '天津市',
children: [
{ code: '120100', name: '天津市' },
],
},
...
],
}
},
methods: {
submitForm() {
this.$refs.form.validate(valid => {
if (valid) {
console.log(this.form)
} else {
console.log('error submit!!')
return false
}
})
},
resetForm() {
this.$refs.form.resetFields()
},
},
}
</script>

<style>
.form {
padding: 20px;
}
</style>

这个表单包括了姓名、选择性别、上传头像、选择生日、选择地区、可以提交、可以重置的功能。其中，姓名、性别、头像、生日、地区都使用了uview2.0中的表单组件，并且都加上了校验规则。注意，上传头像的功能需要你自己实现上传功能。

如果你有更多问题，可以继续问我哦，我会尽快回答你的。