页面:
<view class="page"> <text style="padding-left:102px;">更改个人信息</text> <view style="margin:4px 18px;"> <view> <text>姓名:</text> <input type="text" value="{{name}}" class="xin" bindinput="inputName" placeholder="请输入要修改的姓名"></input> </view> <view> <text>学号:</text> <input type="number" value="{{number}}" class="xin" bindinput="inputNumber" placeholder="请输入要修改的学号"></input> </view> </view> <button type="submit" bindtap="save" class="save" disabled='{{isDisabled}}'>保存</button> </view>js:
const app = getApp() Page({ data: { name: '', number: '', isDisabled: true //表示页面加载完成时disabled为禁用状态 }, onLoad: function(options) { let number = options.number let name = options.name this.setData({ number, name }) }, save: function(e) { let name = this.data.name; let number=this.data.number let token = wx.getStorageSync('token') wx.request({ url: app.globalData.updatexuehao, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded', // 'cookie': token }, data: { token,name,number }, success: res => { if (res.data.error == true) { wx.showToast({ title: res.data.message, icon: 'none', duration: 2000 }) } else { wx.showToast({ title: res.data.message, icon: 'success', duration: 5000 }) wx.removeStorageSync('info') wx.navigateBack({ complete: (res) => {} }) } } }) }, inputName: function(e) { var name = e.detail.value this.setData({ name }) console.log(name) if (name !== '') { this.setData({ isDisabled: false }) } else { this.setData({ isDisabled: true }) } }, inputNumber: function(e) { var number = e.detail.value this.setData({ number }) // console.log() if (number !== '') { this.setData({ isDisabled: false }) } else { this.setData({ isDisabled: true }) } }, onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() { } })样式:
/* 设置不可用状态的背景色 */ button[disabled] { background-color: #eaeaea !important; color: #fff; } .save { width: 17%; padding: 5rpx; margin: 0; font-weight: none; font-size: 40rpx; color: #fff; background-color: #298ef7; } .xin { border: 1px solid #ccc; margin: 3px 6px; width: 93%; padding: 4px; }