如图:在很多app 中会碰到信息提交页面,结合之前所学,来写一下这种类型的页面
1、在app.json中创建页面:
"pages":[
"pages/anli1/anli1",
"pages/index/index",
"pages/logs/logs"
],
2、在anli1.json中设置导航的样式
(在这里提一下取色器,在mac下可以上appstore下载colorslurp软件)
{
"navigationBarBackgroundColor": "#3296FA",
"navigationBarTitleText": "成绩统计",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true,
"backgroundColor": "#262626"
}
3、在anli1.wxml中编写页面
(在这里我还写了输出的组件,方便直观的测试数据)
<view class='inputItem'>
<input
placeholder='请输入你的名字'
maxlength="10"
placeholder-class="placeholderStr"
bindinput='input1'
/>
<input
placeholder='请输入语文成绩'
type="digit"
maxlength="5"
placeholder-class="placeholderStr"
bindinput='input2'
/>
<input
placeholder='请输入数学成绩'
type="digit"
maxlength="5"
placeholder-class="placeholderStr"
bindinput='input3'
/>
<button
bindtap="bindButtonTap"
type='primary'
>提交</button>
</view>
<view class='contentItem' hidden='{{flag}}'>
<view class='content'>学生姓名:{{username}}</view>
<view class='content'>语文成绩:{{yuwenchengji}}</view>
<view class='content'>数学成绩:{{shuxuechengji}}</view>
<view class='content'>平均分:{{pinjunfen}}</view>
</view>
4、在anli1.wxss中修饰页面
/* pages/anli1/anli1.wxss */
input{
background-color: white;
height: 100rpx;
margin-bottom: 1px;
padding-left: 20rpx;
}
page{
background-color: #F1F0F6;
}
button{
margin: 30rpx 50rpx;
}
.placeholderStr{
font-size: 15px;
}
.contentItem{
background-color: white;
}
.content{
height: 100rpx;
display: flex;
align-items: center;
}
5、在anli.js中编写页面逻辑
Page({
/**
* 页面的初始数据
*/
data: {
username:'',
yuwenchengji:'',
shuxuechengji:'',
pinjunfen:'',
flag:true
},
bindButtonTap:function(e){
if (this.data.username == '' || this.data.yuwenchengji == '' || this.data.shuxuechengji == '' ){
this.setData({
flag: true
})
}else{
this.setData({
flag: false
})
}
var pinjunScore = (this.data.yuwenchengji * 1 + this.data.shuxuechengji * 1)/2
this.setData({
pinjunfen: pinjunScore
})
},
input1:function(e){
var inputStr = e.detail.value;
if (!isNaN(inputStr)){
this.setData({
username: inputStr
})
}
},
input2: function (e) {
var inputStr = e.detail.value;
if (!isNaN(inputStr)) {
this.setData({
yuwenchengji: inputStr
})
}
},
input3: function (e) {
var inputStr = e.detail.value;
if (!isNaN(inputStr)) {
this.setData({
shuxuechengji: inputStr
})
}
}
})
最后输出结果: