100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序 按钮的禁用和使能

微信小程序 按钮的禁用和使能

时间:2021-06-28 22:33:40

相关推荐

微信小程序 按钮的禁用和使能

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

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就好,简单粗暴

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。