做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存。以下是说明及简化后的代码:
1。页面加载完成时,所有输入处于禁用状态;
2。点击编辑按钮时,文字切换成“保存”,身份证输入保持始终不可修改状态(即禁用),姓名输入可以修改(即动态加载切换禁用/启用),
3。再次点击按钮文字切回“编辑”,所有输入变为禁用状态。
以下是wxml部分
& lt;视图类=癰tn”比;
& lt;按钮bindtap=" changeInfo "在{{文本}}& lt;/button>//绑定按钮的点击事件
& lt;/view>
& lt; view>姓名:
& lt;输入class=" uName”类型=拔谋尽苯?' {{isDisabled}}/比;
& lt;/view>
& lt; view>身份证号:
& lt;输入类=" uIdentity " type=禁用“经办人身份证”=罢媸怠?比;
& lt;/view>
之前
上段代码中,姓名为动态加载状态,所以禁用写成<代码>=禁用的{{isDisabled}} '而身份证输入为始终不可修改的状态,所以禁用写死为<代码>=禁用“真实”
以下是js部分
页面({
数据:{
isDisabled:真的,//表示页面加载完成时禁用为启用状态
文本:“编辑”//表示按钮初始文字为编辑
},
changeInfo (e){//点击事件发生时//一定要写成this.data.isDisabled,不然判断出不来
如果(! this.data.isDisabled){//当=false时禁用
this.setData ({
isDisabled:真的,//修改isDisabled的值为真(即启用状态)
文本:“编辑”//文字修改为“编辑”
})
}
{//当其他=true时禁用
this.setData ({
isDisabled:假的,//修改isDisabled的值为false(即禁用状态)
文本:“保存”//文字修改为“保存”
})
}
}
之前
将用户信息数据动态加载到输入框中,此过程中身份证始终保持不可修改的状态,姓名可根据按钮动态切换成编辑和保存的状态。
微信小程序中带残疾属性的表单组件有(点击可以进入官方文档):
按钮,复选框,输入,选择器、无线电、滑块、开关、textarea
如果是固定禁用组件的话,直接放上禁用就好,简单粗暴,如:
1。忽略值的情况:
<代码> & lt;按钮disabled>测试& lt;/button>
2。使用值的情况:
& lt; !——正确——比;
& lt;按钮禁用="{{真}}”在测试& lt;/button>
& lt;按钮禁用="{{假}}”在测试& lt;/button>
& lt; !——错误——比;
& lt;按钮禁用=" true "祝辞测试& lt;/button>
& lt;按钮禁用=" false "祝辞测试& lt;/button>
之前
在以上的错误写法中,禁用=" true "是有效的,但禁用=癴alse”是无效的,接下来,我先解释一下:
注意一下官方文档中,残疾人的值是布尔值(布尔),而以上的字符串(字符串),赋值“false”就是真的。
所以禁用=" false "其实就是残疾=true,它的非禁用就无效了。
如果残疾的值是动态的灵活的话,如:
在index.js中,设置一个数据数据变量
页面({
数据:{
isDisabled:真
}
})
在index.wxml中,用上表单组件
& lt;输入类型=拔谋尽苯?" {{isDisabled}} "/比;
& lt;按钮禁用=" {{isDisabled}}”在测试& lt;/button>
修改残疾的值
this.setData ({
isDisabled:假
})
之前
到此这篇关于微信小程序点击按钮动态切换输入的残疾禁用/启用状态功能的文章就介绍到这了,更多相关微信小程序切换输入内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
