福州小程序开发_微信小程序点击按钮动态切换

微信小程序点击按钮动态切换input的disabled禁用/启用状态功能       这篇文章主要介绍了微信小程序点击按钮动态切换input的disabled禁用/启用状态功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

做微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存。以下是说明及简化后的代码:

1.页面加载完成时,所有input处于禁用状态;

 2.点击编辑按钮时,文字切换成“保存”,身份证input保持始终不可修改状态(即禁用), 姓名input可以修改(即动态加载切换禁用/启用);

3.再次点击按钮文字切回“编辑”,所有input变为禁用状态。

以下是wxml部分

 view 
 button bindtap="changeInfo" {{text}} /button //绑定按钮的点击事件
 /view 
 view 姓名:
 input type="text" disabled='{{isDisabled}}'/ 
 /view 
 view 身份证号:
 input 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属性的表单组件有(点击可以进入官方文档):

,,,,,,,

如果是固定禁用组件的话,直接放上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

总结

到此这篇关于微信小程序点击按钮动态切换input的disabled禁用/启用状态功能的文章就介绍到这了,更多相关微信小程序切换input内容请搜索凡科以前的文章或继续浏览下面的

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://mfjzn.cn/ziyuan/3132.html