小程序裏面有form表單組件,提交表單通過button提交,在form標籤裏添加bindsubmit事件,然後在button標籤裏面添加觸發bindsubmit事件的屬性:form-type=“submit”,就可以將表單提交到服務器了,需要注意的是button必須是要在form標籤裏面,例如:
<form bindsubmit="test">
<button form-type="submit"></button>
</form>
提交表單的後續的操作寫在bindsubmit事件裏面:
test:function(){
wx.navigateTo({
url: '../../index/index',
})
}
這樣點擊button按鈕時表單就已經提交上去了,並且隨後會自動跳轉到index界面,上一段結合weui工具寫的發佈商品的代碼吧,wxml:
<form bindsubmit='release'>
<input class='ipt1' placeholder='爲您的寶貝添加個誘人的標題吧(不超過30字)'></input>
<textarea class='ipt2' placeholder='更詳細的介紹可以幫助更快送出,如品牌、市場價格、尺碼、送出原因等(不少於10個字)'></textarea>
<view class="page__bd">
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<view class="weui-uploader">
<view class="weui-uploader__hd">
<view class="weui-uploader__title">上傳圖片</view>
<!-- <view class="weui-uploader__info">{{files.length}}/9</view> -->
</view>
<view class="weui-uploader__bd">
<view class="weui-uploader__files" id="uploaderFiles">
<block wx:for="{{files}}" wx:key="*this">
<view class="weui-uploader__file" bindtap="previewImage" id="{{item}}">
<image class="weui-uploader__img" src="{{item}}" mode="aspectFill" />
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<navigator url="/pages/address/address" open-type="navigateTo" class='order-bar' hover-class='none'>
<view class='order-list'>
<text>地址</text>
</view>
<image src='../../img/right-bar.svg'></image>
</navigator>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:65rpx'>全新</view>
<view class="weui-cell__ft" style='font-size:30rpx;color:#333;height:80rpx;padding:0rpx;line-height:60rpx'>
<switch />
</view>
</view>
</view>
<view class='price'>
<view class='price1'>
<view class='price1-text1'>一口豆</view>
<view class='price1-text2'>競拍</view>
</view>
<view class='price2'>
<view class='price2-text1'>一口豆</view>
<view class='price2-text2'>朵</view>
<input class='p-ipt' placeholder='50'></input>
</view>
<navigator url='../product-list/product-list' class='price3'>
<view class='price2-text1'>分類標籤</view>
<image src='../../img/right-bar.svg' class='p-img'></image>
<view class='price2-text2'>請選擇分類</view>
</navigator>
<view class='price3'>
<view class='price2-text1'>上門快遞</view>
<image src='../../img/right-bar.svg' class='p-img'></image>
<view class='price2-text2'>普通快遞</view>
</view>
</view>
<button class='btn' form-type='submit'>發佈寶貝</button>
</form>
<view class='foot'></view>
wxss:
/* pages/release/release.wxss */
.ipt1{
font-size: 24rpx;
padding: 30rpx;
border-bottom: 1rpx #f4f4f4 solid;
}
.ipt2{
font-size: 24rpx;
height: 150rpx;
width: 690rpx;
padding: 30rpx
}
.order-bar{
height: 80rpx;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
color: #333;
background: #fff;
font-size: 30rpx;
margin-top: 5rpx;
border-bottom: 1rpx #f4f4f4 solid;
}
.order-bar image{
width: 32rpx;
height: 32rpx;
margin-right:14rpx;
}
.order-list{
display: flex;
align-items: center;
}
.price1{
margin-top: 30rpx;
height: 60rpx;
width: 690rpx;
padding: 0 30rpx;
display: flex;
}
.price1-text1{
flex: 1;
font-size: 24rpx;
color: #FC3636;
text-align: center;
line-height: 60rpx;
border: 1rpx #FC3636 solid;
border-radius: 30rpx;
background: rgba(252, 54, 54, 0.034);
}
.price1-text2{
flex: 1;
font-size: 24rpx;
color: #666;
text-align: center;
line-height: 60rpx;
border: 1rpx #666 solid;
border-radius: 30rpx;
}
.price2{
height: 80rpx;
width: 690rpx;
padding: 0 30rpx;
font-size: 24rpx;
line-height: 80rpx;
color: #333;
margin-top: 35rpx;
border-bottom: 1rpx #f4f4f4 solid;
}
.price2-text1{
float: left;
}
.p-ipt{
float: right;
width: 100rpx;
text-align: right;
margin-right: 10rpx;
height: 80rpx;
line-height: 80rpx;
}
.price2-text2{
float: right;
}
.price3{
font-size: 24rpx;
color: #333;
width: 690rpx;
padding: 0 30rpx;
line-height: 80rpx;
height: 80rpx;
border-bottom: 1rpx #f4f4f4 solid;
}
.p-img{
height: 80rpx;
width: 30rpx;
display: block;
float: right;
margin-left: 10rpx;
}
.btn{
height: 80rpx;
width: 100%;
text-align: center;
position: fixed;
bottom: 0;
background: #FC3636;
line-height: 80rpx;
color: #fff;
font-size: 32rpx;
}
.foot{
height: 200rpx;
width: 100%;
}
js:
// pages/release/release.js
Page({
/**
* 頁面的初始數據
*/
data: {
files: []
},
chooseImage: function (e) {
var that = this;
wx.chooseImage({
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機,默認二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表,tempFilePath可以作爲img標籤的src屬性顯示圖片
that.setData({
files: that.data.files.concat(res.tempFilePaths)
});
}
})
},
previewImage: function (e) {
wx.previewImage({
current: e.currentTarget.id, // 當前顯示圖片的http鏈接
urls: this.data.files // 需要預覽的圖片http鏈接列表
})
},
/**
* 生命週期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命週期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命週期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命週期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命週期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
預覽效果: