做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存。以下是说明及简化后的代码:
1.页面加载完成时,所有input处于禁用状态;
2.点击编辑按钮时,文字切换成“保存”,身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用);
3.再次点击按钮文字切回“编辑”,所有input变为禁用状态。
以下是wxml部分
<view class="btn"> <button bindtap="changeInfo">{{text}}</button> //绑定按钮的点击事件 </view> <view>姓名: <input class="uName" type="text" disabled='{{isDisabled}}'/> </view> <view>身份证号: <input class="uIdentity" type="idcard" disabled='true'/> </view>
上段代码中,姓名为动态加载状态,所以disabled写成disabled='{{isDisabled}}
' 而身份证input为始终不可修改的状态,所以disabled写死为disabled=‘true'
以下是js部分
Page({ data: { isDisabled:true, //表示页面加载完成时disabled为启用状态 text:"编辑" //表示按钮初始文字为编辑 }, changeInfo(e) { //点击事件发生时 //一定要写成this.data.isDisabled,不然判断出不来 if (!this.data.isDisabled) { //当disabled=false时 this.setData({ isDisabled: true, //修改isDisabled的值为true(即启用状态) text: "编辑" //文字修改为“编辑” }) } else { //当disabled=true时 this.setData({ isDisabled: false, //修改isDisabled的值为false(即禁用状态) text: "保存" //文字修改为“保存” }) } }
将用户信息数据动态加载到input框中,此过程中身份证始终保持不可修改的状态,姓名可根据按钮动态切换成编辑和保存的状态。
下面给大家补充点知识解决“微信小程序disabled属性不生效”的问题!
微信小程序中带disabled属性的表单组件有(点击可以进入官方文档):
button,checkbox,input,picker,radio,slider,switch,textarea
如果是固定禁用组件的话,直接放上disabled就好,简单粗暴,如:
1. 忽略值的情况:
<button disabled>测试</button>
2. 使用值的情况:
<!-- 正确 --> <button disabled="{{true}}">测试</button> <button disabled="{{false}}">测试</button> <!-- 错误 --> <button disabled="true">测试</button> <button disabled="false">测试</button>
在以上的错误写法中,disabled="true"是有效的,但disabled="false"是无效的,接下来,我先解释一下:
注意一下官方文档中,disabled的值是布尔值(Boolean),而以上的字符串(String),赋值“false”就是true。
所以disabled="false"其实就是disabled=true,它的非禁用就无效了。
如果disabled的值是动态的灵活的话,如:
在index.js中,设置一个data数据变量
Page({ data: { isDisabled: true } })
在index.wxml中,用上表单组件
<input type="text" disabled="{{isDisabled}}" /> <button disabled="{{isDisabled}}">测试</button>
修改disabled的值
this.setData({ isDisabled: false })
总结