本文给大家带来的是微信小程序快递包裹长宽高计算费用页面设计制作开发教程,制作好以后效果图如下:
一、wxml页面代码如下:
<!--volumeCalc.wxml-->
<form bindsubmit="formSubmit">
<view class="volume">
<view class="topselect">
<view class="left">
<button style=" padding-left:27px ;padding-right:27px;border-radius:33px;line-height:1.7;color:#0398e7;background-color:#ffffff;border:1px solid #0398e7;" type="primary" bindtap="jump" data-jump="volumeStart">国内港澳台</button>
</view>
<view class="right">
<button style=" padding-left:27px ;padding-right:27px;border-radius:33px;line-height:1.7;color:#ffffff;background-color:#0398e7;" type="primary" bindtap="jump" data-jump="volumeStart">国际其他地区</button>
</view>
</view>
</view>
<view class="volume_input">
<view class="inputGroup">
<text class="label">长(CM):</text>
<input type="digit" class="length" placeholder="" name="length"/>
</view>
<view class="inputGroup martop">
<text class="label">宽(CM):</text>
<input type="digit" class="length" placeholder="" name="width"/>
</view>
<view class="inputGroup martop">
<text class="label">高(CM):</text>
<input type="digit" class="length" placeholder="" name="height"/>
</view>
<view class="calcbutton">
<button type="primary" form-type="submit" id="" style="background-color:#0398e7;">计算</button>
</view>
<view class="hr"></view>
<text hidden="{{resultHidden}}" style="color:#717171;margin-top:10px">计算结果:<text style="color:#f94863;margin-left:5px;font-weight:bold;">{{result}}</text></text>
</view>
</form>
|
二、wxss样式文件代码如下:
/* volumeCalc.wxss */
.volume{
background-color: #ffffff;
width: 100%;
box-shadow:1px 1px 4px #888888;
}
.volume_input{
padding: 20px 10px;
margin-top:10px;
background-color: #ffffff;
min-height: 199px;
}
.topselect{
padding: 10px 0;
text-align: center;
flex-flow: column wrap;
justify-content: center;
}
.button_top_left{
padding-left:27px ;padding-right:27px;border-radius:33px;
}
.button_top_right{
padding:10px 27px ;
border-radius: 33px;
}
.left{
padding-right: 5px;
display: inline-block;
border-right: 1px solid #d6d6d6;
}
.right{
padding-left:5px;
display: inline-block;
}
.label{
width: 20%;
position: relative;
top: 10px;
color: #717171;
}
.length{
padding: 4px 6px;
display: inline-block;
width: 80%;
float: right;
color: #717171;
border:1px solid #717171;
}
.inputGroup{
width: 100%;
}
.martop{
margin-top:35px;
}
.place{
width: 20%;
}
.calcbutton{
margin-left:16%;
margin-top:10%;
width:60%;
}
|
三、js页面代码如下:
// volumeCalc.js
Page({
/**
* 页面的初始数据
*/
data: {
resultHidden: true,
result: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
jump: function (e) {
var url = e.currentTarget.dataset.jump;
wx.navigateTo({
url: '../' + url + "/" + url,
complete: function () {
console.log('success')
}
})
},
formSubmit: function (e) {
var form = e.detail.value;
var result = parseInt(form.width) + parseInt(form.height) + parseInt(form.length)
this.setData({
result: result,
resultHidden: false
})
},
})
|