2-5 案例（页面文本输入并提交）

如图：在很多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
      })
    }
  }
})

最后输出结果：