两个输入框分别为input与textarea,然后用form表单包裹两个输入框所输入的数据,再上传到服务器,效果图:
post.wxml
<form bindsubmit="formSubmit" bindreset="formReset"> <view style='position: fixed; width: 100%;'> <input name="input" placeholder="添加标题" class='inp' value='{{form_info}}'/><textarea class="detailText" value="{{details}}" textarea fixed="true" placeholder="添加内容..." name="inp2" value='{{form_info}}'> </textarea><view class='an1'><button form-type="submit" class='an'>发布</button> </view> </view></form>
post.js
Page({data: {img_arr: [],},//判断是否填完整,并将input中的数据上传到服务器 formSubmit: function (e) {var that = this; console.log('form发生了submit事件,携带数据为:', e.detail.value) console.log(that.data.img_arr) var that = this; var formData = e.detail.value;if (e.detail.value.input == '' || e.detail.value.inp2 == '') {wx.showToast({title: '请填写完整···', }) } else {wx.request({url: 'https:***/submit',//这里的接口请填实际接口data: formData, header: {'Content-Type': 'application/json' },success: function (res) {console.log(res.data)wx.showtoast({title: '提交成功'}) that.setData({form_info: ''}) }})} }})
post.wxss
.detailText {height: 400rpx; width: 100%; border-bottom:5rpx solid #efeff3;}.inp {margin: 20rpx 0rpx 20rpx 30rpx; width: 100%;}.an {height: 90rpx; width: 270rpx;font-size: 38rpx; background-color: rgba(0, 0, 0, 0.288); font-weight: 600; color: white;}button::after {border: none;}.an1 {margin-top: 90rpx;}