精华内容
下载资源
问答
  • 微信小程序按钮禁用
    2022-02-16 18:04:00

    小记:

    近期在学习微信小程序参与一个自己的嵌入式控制项目,前端所了解的不深,遇到好些问题,就在这里,零零碎碎做一些笔记。

    下面就微信小程序使用WXML标签绑定JS中的数组实现的可在循环中控制批量的按键。

    1、实现动态绑定

    首先来看看单个按键如何动态绑定,通过{{变量名}}的形式将JS中的变量传递给对应属性

    <view>
    <button disabled="{{disabled}}" bindtap="Button_1">按钮1</button>
    </view>
    

    对应的JS代码,这里和标准的JavaScript不同的是不可以使用

    document.getElementById("p1").innerHTML="新文本!";的方式获取到对应HTML中的节点信息,并获得修改的权限,而要使用setData()函数,参考代码如下。

    Page({
      data: {
        disabled:false,
        },
    
      Button_1(){
        this.setData({
          disabled:false,
        })
      },
    })

    2、实现数组动态绑定

    使用数组的形式在JS中定义disable:[{}],在WXML标签属性中引用,这里由于很小白,摸索了好久才会使用三个按钮点击的事件分别是Button_1这里只演示一个按钮按下后,其他按钮的disable属性修改为false,即启用其他按钮,类似于单选按钮一样。

    可适用于"开始连接"—>"断开连接"—>“结束服务"等流程化的按钮操作。

    <view>
    <button disabled="{{disabled[1].value}}" bindtap="Button_1">按钮1</button>
    <button disabled="{{disabled[2].value}}" bindtap="Button_2">按钮2</button>
    <button disabled="{{disabled[3].value}}" bindtap="Button_3">按钮3</button>
    </view>
    
    

    在微信小程序的JS中存在一些与标准JS不一样的语法,可能是微信小程序开发团队处于某些因素考虑,修改了部分写法,但如果掌握了还是可以挺好用的。

    Page({
      data: {
        disabled:[
          {value:false,},{value:true},{value:true},//*****重点哦*****//
        ]
        },
    
        Button_1(){
        for(let i = 2; i <= 3;i++)
        let temp = 'diasbled['+i+'].value'//*****重点哦*****//
        this.setData({
          temp:false
        }),
    })

    在JS中需要注意的有两点:let temp = 'diasbled['+i+'].value',使用过字符串连接的方式吧disable[i].value和WXML中调用的一样,但由于setData中不允许有这种形式出现,所以只好定义一个临时变量承担这个名称指代作用,然后相同的使用temp:false来操作。

    数组的disable在data:{}定义的时候的语法也要注意一下,我是通过i直接做index索引的。

    另外还有一个很坑很坑的坑,就是如果关键词没有表上其他的颜色,如下图的id3后面的value:ture是会报错的,他认为是没有ture的定义。

    ——————

    希望小记对你有所帮助哦!

    更多相关内容
  • 主要介绍了微信小程序点击按钮动态切换input的disabled禁用/启用状态功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • 微信小程序为例,其他原理相同 效果图 wxml <button bindtap="getBangDing" disabled="{{buttonShow}}" type="primary">绑定用户({{buttonTime}})</button> js js data buttonShow:'false', button...

    以微信小程序为例,其他原理相同

    效果图

    在这里插入图片描述
    在这里插入图片描述

    wxml

    <button bindtap="getBangDing" disabled="{{buttonShow}}" type="primary">绑定用户({{buttonTime}})</button>
    

    js

    js data

    buttonShow:'false',
    buttonTime: '180',          // 按钮失效倒计时
    
     // 180秒后禁用绑定按钮
            var inter = setInterval(function () {
              this.setData({
                buttonShow:false,
                buttonTime: this.data.buttonTime - 1
              });
              if (this.data.buttonTime < 0) {
                clearInterval(inter)
                this.setData({
                  buttonShow:true,
                  buttonTime: 0,
                });
              }
            }.bind(this), 1000);
    

    设定一个定时器,一秒执行一次,小于0时关闭定时器,动态设置按钮“disabled”属性。
    和获取验证码,点击置灰 到时恢复原理一样


    展开全文
  • 本文为大家分享了微信小程序button组件的使用方法,供大家参考,具体内容如下 展示效果图 button组件的常用属性 size:default、mini—-default为块级按钮、mini为小按钮 type:primary、default、warn—-primary...
  • 微信小程序微信小程序bindtap事件与冒泡阻止详解事件与冒泡阻止详解bindtap就是点击事件在在.wxml文件绑定文件绑定:<text id='textId' data-userxxx='100' bindtap='tapMessage'>cilck here在一个组件的属性上添加...
  • 1. 效果演示 试了一下上传不了视频。。。 2. 原理 原理就是给button的disabled属性绑定数据,然后通过给input绑定点击事件,判断输入框输入值的长度来动态改变disabled的属性,以及button的背景颜色。...

    1. 效果演示

    在这里插入图片描述

    上传不了视频。。。

    2. 原理

    原理就是给button的disabled属性绑定数据,然后通过给input绑定点击事件,判断输入框输入值的长度来动态改变disabled的属性,以及button的背景颜色。

    3. 代码

    wxml代码

    <!--pages/sendSms/sendSms.wxml-->
    <view class="send_sms">
      <view class="sms_box">
        <input type="number" class="phone" placeholder="请输入手机号" bindinput="phoneInput"/>
        <button class="getSms" size="mini" style="color: {{color1}};font-size: small;" disabled="{{disable1}}" bindtap="sendSMS">获取验证码</button>
        </view>
      
      <input type="number" class="sms" placeholder="请输入验证码" bindinput="smsInput"/>
      <button class="login" style="color: {{color2}}; background: {{background}};" disabled="{{disable2}}" bindtap="login">登录</button>
    </view>
    
    

    wxss代码

    /* pages/sendSms/sendSms.wxss */
    .sms_box{
      display: flex;
      height: 100rpx;
      width: 600rpx;
      margin: 0 auto;
      align-items: center;
      border-bottom: 1rpx solid #cdcdcd;
    }
    
    .phone{
      display: inline-block;
      width: 400rpx;
      height: 100rpx;
      font-size: medium;
    }
    
    .getSms{
      display: inline-block;
      background-color: #fff;
    }
    .getSms::after{
      border: none;
    }
    .sms{
      width: 600rpx;
      height: 100rpx;
      font-size: medium;
      margin: 0 auto;
      border-bottom: 1rpx solid #cdcdcd;
    }
    .login{
      margin-top: 30rpx;
    }
    

    js代码

      data: {
        disable1:true,
        disable2:true,
        color1:"#cdcdcd",
        color2:"#666",
        background:"#cdcdcd"
      },
      phoneInput(e){
        if(e.detail.value.length == 11){
          this.setData({
            disable1:false,
            color1:"#1296db"
          })
        }else{
          this.setData({
            disable1:true,
            color1:"#cdcdcd"
          })
        }
      },
      smsInput(e){
        if(e.detail.value.length == 6){
          this.setData({
            disable2:false,
            color2:"#fff",
            background:"#1296db"
          })
        }else{
          this.setData({
            disable2:true,
            color2:"#666",
            background:"#cdcdcd"
          })
        }
      },
    
    展开全文
  • 属性类型默认值必填说明最低版本 size string default 否 按钮的大小 1.0.0 type string default 否 按钮的样式类型 ...按钮是否镂空,背景色透明 ...是否禁用 1.0.0 loading boolean false ...
    属性类型默认值必填说明最低版本
    sizestringdefault按钮的大小1.0.0
    typestringdefault按钮的样式类型1.0.0
    plainbooleanfalse按钮是否镂空,背景色透明1.0.0
    disabledbooleanfalse是否禁用1.0.0
    loadingbooleanfalse名称前是否带 loading 图标1.0.0
    form-typestring 用于 form 组件,点击分别会触发 form 组件的 submit/reset 事件1.0.0
    open-typestring 微信开放能力1.1.0
    hover-classstringbutton-hover指定按钮按下去的样式类。当 hover-class="none" 时,没有点击态效果1.0.0
    hover-stop-propagationbooleanfalse指定是否阻止本节点的祖先节点出现点击态1.5.0
    hover-start-timenumber20按住后多久出现点击态,单位毫秒1.0.0
    hover-stay-timenumber70手指松开后点击态保留时间,单位毫秒1.0.0
    langstringen指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文。1.3.0
    session-fromstring 会话来源,open-type="contact"时有效1.4.0
    send-message-titlestring当前标题会话内消息卡片标题,open-type="contact"时有效1.5.0
    send-message-pathstring当前分享路径会话内消息卡片点击跳转小程序路径,open-type="contact"时有效1.5.0
    send-message-imgstring截图会话内消息卡片图片,open-type="contact"时有效1.5.0
    app-parameterstring 打开 APP 时,向 APP 传递的参数,open-type=launchApp时有效1.9.5
    show-message-cardbooleanfalse是否显示会话内消息卡片,设置此参数为 true,用户进入客服会话会在右下角显示"可能要发送的小程序"提示,用户点击后可以快速发送小程序消息,open-type="contact"时有效1.5.0
    bindgetuserinfoeventhandle 用户点击该按钮时,会返回获取到的用户信息,回调的detail数据与wx.getUserInfo返回的一致,open-type="getUserInfo"时有效1.3.0
    bindcontacteventhandle 客服消息回调,open-type="contact"时有效1.5.0
    bindgetphonenumbereventhandle 获取用户手机号回调,open-type=getPhoneNumber时有效1.2.0
    binderroreventhandle 当使用开放能力时,发生错误的回调,open-type=launchApp时有效1.9.5
    bindopensettingeventhandle 在打开授权设置页后回调,open-type=openSetting时有效2.0.7
    bindlaunchappeventhandle 打开 APP 成功的回调,open-type=launchApp时有效2.4.4

    size 的合法值

    说明最低版本
    default默认大小 
    mini小尺寸 

    type 的合法值

    说明最低版本
    primary绿色 
    default白色 
    warn红色 

    form-type 的合法值

    说明最低版本
    submit提交表单 
    reset重置表单 

    open-type 的合法值

    说明最低版本
    contact打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 (小程序插件中不能使用)1.1.0
    share触发用户转发,使用前建议先阅读使用指引1.2.0
    getPhoneNumber获取用户手机号,可以从bindgetphonenumber回调中获取到用户信息,具体说明 (小程序插件中不能使用)1.2.0
    getUserInfo获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用)1.3.0
    launchApp打开APP,可以通过app-parameter属性设定向APP传的参数具体说明1.9.5
    openSetting打开授权设置页2.0.7
    feedback打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容2.1.0

    lang 的合法值

    说明最低版本
    en英文 
    zh_CN简体中文 
    zh_TW繁体中文 

     

    下面举例子:

    外观主要用到这几个属性:

    button 标签1 外观的属性   1 size 控制按钮的大小     1 default 默认大小     2 mini 小尺寸

    2 type 用来控制按钮的颜色   1 default 灰色  (字体颜色是绿色)   2 primary 绿色  (字体颜色是白色)   3 warn 红色    (字体红色)

      3 plain 按钮是否镂空,背景色透明

      4 loading 文字前显示正在等待图标

    运行:

    <button size="default" type="default">default 按钮(type="default")</button>
    
    <button size="mini" type="primary">mini 按钮(type="primary")</button>
    
    <button size="default" type="warn">warn 按钮</button>
    
    <button plain>镂空按钮</button>
    
    <button loading >登录中</button>
    

    展开全文
  • 现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做。 ​ 参考了其他篇的文章,但是没有解决自定义背景的和...
  • 原因:通过disabled属性来禁用按钮禁用的是bind:click事件,无法禁用bindtap事件,我使用的是表单提交,应该调用的是bindtap,所以无法禁用。 解决办法:动态修改van-button里的formType="submit"为空,表单提交...
  • 完整微信小程序(Java后端) 技术贴目录清单页面(必看) 属性 类型 默认值 必填 说明 最低版本 size string default 否 按钮的大小 1.0.0 type string default 否 按钮的样式类型 1.0.0 plain boolean ...
  • 微信小程序改变 button disabled 样式

    千次阅读 2018-12-14 18:08:25
    微信小程序Button怎么设置disabled时的样式? /** 必须“提升指定样式规则的应用优先权(!important)。” **/ button[disabled] { color: #fff !important; background: #5bc0de !important; border-color: ...
  • show-menu-by-longpress boolean false 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序(若图片中包含对应二维码或小程序码)的菜单。(需要2.7.0版本及以上) binderror eventhandle...
  • https://blog.csdn.net/qq_28869233/article/details/89214684
  • 微信小程序按钮失效的几大原因

    万次阅读 2019-07-04 19:17:09
    微信小程序按钮失效的几大原因(里面有大坑)
  • /* 设置不可用状态的背景色 */ button[disabled]{ background-color: #ccc; }
  • 之前写过一篇微信小程序使用movable-view实现左滑删除功能,有同学使用了这种方案并提出我之前没有发现的bug(现在bug已进行了修复),感谢。 有同学问了如果不使用movable-view的话如何来实现左滑删除?那这次就写...
  • 微信小程序禁用分享

    千次阅读 2021-01-27 10:55:00
    开发微信小程序过程中,很多同学可能是通过拷贝或者开发者工具的方式自动生成的页面,这些页面带有很多的生命周期,不少同学并没有删除这些生命周期,大部分情况下没什么问题,但分享相关的生命周期,如果不删除的话...
  • 微信小程序项目的时候遇到一个功能,个人信息资料的修改与保存。 以下是说明及简化后的代码: 1.页面加载完成时,所有input处于禁用状态; 2.点击编辑按钮时,文字切换成“保存”,身份证input保持始终不可修改...
  • 继续查找,于是找到了用 catchtouchmove 事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 代码: WXML: <swiper class='yaohe' vertical='true' circular='true'
  • 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从轻松理解JS函数节流和...
  • 微信小程序开发之微信小程序交互

    千次阅读 2022-03-11 15:32:01
    一、小程序交互 前端: 1、先在登陆界面中编写代码 2、在前端中编写js代码 后端: 1、先导入依赖: 2、定义好配置文件 3、编写好实体类 4、将帮助类进行配置 5、编写mapper类 6、定义service层以及...
  • 第一:wx.navigatorTo 【新页面打开,默认会有返回按钮】 第二:wx.redirectTo【当前页面打开,默认无返回按钮】 第三:wx.switchTab【只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换】 第...
  • 1.全局配置默认启用所有页面的下拉刷新 2.在需要禁用下拉刷新的页面禁用下拉刷新     ...
  • 对于左上角的返回按钮,如果相要在返回的时候,弹框确定后再返回,微信小程序是没有api支持。在微信小程序的思路上基本无解。 二。解决办法:用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的...
  • 微信小程序开发初学:按钮 - button

    千次阅读 2021-01-26 11:30:10
    按钮组件。 button具有的属性 type 类型:String 默认值:default 按钮的颜色样式 type属性的合法值 (1)default:默认样式 (2)primary:绿色 (3)warn:红色 ...按钮尺寸 ...(2)mini:尺寸 ...按钮是否禁用 loa
  • /*swtich整体大小及背景色*/ .wx-switch-input{ width:80rpx !important; height:35rpx !important; background: #ccc !important; border: #ccc !important; } /*白色样式(false的... } 参考 微信小程序 switch 样式
  • uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实现 1.技术点: vueX ...
  • 2.3.1微信小程序按钮组件:button

    千次阅读 2017-04-22 11:32:44
    微信小程序按钮组件:button 按钮组件。 属性名 类型 默认值 说明 最低版本 size String default 按钮的大小   type String default 按钮的样式类型   plain Boolean fal
  • 由于微信小程序自带开发者工具的编码体验不好,因此建议使用VS code 加微信小程序开发工具来实现编码,VS code负责敲代码,微信开发工具负责 2.第一个微信小程序 3.微信开发者工具介绍 4.小程序...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,163
精华内容 1,265
关键字:

微信小程序按钮禁用