微信小程序内的表单我想要做下面的效果
我使用了flex布局,没有实现上面效果,代码如下
(表单项有点多,是我真实的代码)
<!-- 下面是 wxml 代码 -->
<view class="box">
<form bindsubmit="formSubmit">
<view class="form-container">
<view class="top-container">
<view class="form-item">
<text class="head">公司名称:</text>
<input class="tail" type="text" name="company" placeholder="请输入公司名称" value=""/>
</view>
<view class="form-item">
<text class="head">姓名:</text>
<input class="tail" type="text" name="realName" placeholder="请输入真实姓名" value="cc"/>
</view>
<view class="form-item">
<text class="head">昵称:</text>
<input class="tail" type="nickname" name="nickName" placeholder="昵称" />
</view>
<view class="form-item">
<text class="head">部门:</text>
<input class="tail" type="text" name="department" placeholder="请输入部门名称" />
</view>
<view class="form-item">
<text class="head">职务:</text>
<input class="tail" type="text" name="position" placeholder="请输入职务名称" />
</view>
<view class="form-item">
<text class="head">手机号码:</text>
<input class="tail" type="text" name="phone" placeholder="请输入手机号码" />
</view>
</view>
<view class="bottom-container">
<button form-type="submit" type="primary" loading="{{ loading }}">提交</button>
<view class="tip-text-container">
<text>公司名称、姓名,是必填项,填写后才可提交。</text>
</view>
</view>
</view>
</form>
</view>
<!-- 下面是 scss 代码 -->
// /* pages/cate/cate.wxss */
// .btn {
// background-color: transparent;
// }
// .btn::after {
// border: none;
// }
// .avatar {
// width: 200rpx;
// height: 200rpx;
// border-radius: 50%;
// }
// input {
// border: 1px solid #179c16;
// margin: 20rpx;
// height: 60rpx;
// border-radius: 20rpx;
// padding-left: 20rpx;
// }
.box{
padding: 30rpx;
}
.form-item{
display: flex;
background-color: rgb(221, 230, 230);
margin-bottom: 10rpx;
border-radius: 30rpx;
}
.head{
line-height: 100rpx;
margin-left: 30rpx;
}
.tail{
height: 100rpx;
}
.pic{
height: 100rpx;
width: 500rpx;
margin-left: -2rpx;
}
.tip-text-container {
color: #dde6e6;
padding-top: 10px;
}
.form-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
表单跟按钮分开,按钮做绝对/相对定位到底部,设置 .box的背景色就行了