当前位置：首页 > news >正文

一个简单的微信小程序表单提交样式模板

news 2025/9/17 10:50:24

没什么东西，只是方便自己直接复制使用

.wxml

<view class="box"><form bindsubmit="formSubmit"><view class="form-item"><text class="head">姓名：</text><input class="tail" type="text" name="name" placeholder="请输入姓名" /></view><view class="form-item"><text class="head">学校：</text><input class="tail" type="text" name="school" placeholder="请输入学校" /></view><view class="form-item"><text class="head">职位选择：</text><picker mode="selector" bindchange="bindPickerChange"  range-key="name" value="{{index}}" range="{{objectArray}}"><view class="head pic"><!-- {{array[index][name]}} --></view></picker></view><button form-type="submit" type="primary">提交</button></form>
</view>

.,scss

.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;
}

Page({/**- 页面的初始数据*/data: {objectArray: [{id: 0,name: '美国'},{id: 1,name: '中国'},{id: 2,name: '巴西'},{id: 3,name: '日本'}],},// 表单提交的formSumit(e) {console.log(e)},// 选择器选择的bindPickerChange(){},
})