富贵资源网 Design By www.hznty.com
目标:
用户点击提交、登录等按钮时,防止多次提交,所做的遮罩层
步骤:
实现很简单,按钮加上disabled属性,用true和false控制。
效果图:
代码:
wxml
<!--pages/login/login.wxml--> <loading hidden="{{hidden}}"> 登录中... </loading> <view class="container-login"> <form catchsubmit="formSubmit"> <view class='login-main'> <!-- username --> <view class="login-view"> <image src='/images/icon/user.png'></image> <input type='text' name='username' placeholder='请输入用户名'></input> </view> <!-- password --> <view class="login-view"> <image src='/images/icon/pwd.png'></image> <input type='password' name='password' placeholder='请输入密码'></input> </view> </view> <view class='login-part'> <button formType="submit" class="login-button" disabled="{{buthidden}}">登录</button> </view> </form> </view>
js
// pages/login/login.js Page({ /** * 页面的初始数据 */ data: { hidden: true, //等待的展示与隐藏的控制 buthidden: false //按钮的可用和不可用的控制 }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, /** * 表单提交:用户登录 */ formSubmit: function (e) { // 控制登录按钮,防止重复提交 this.setData({ hidden: false, buthidden: true }) } })
tip:
1、注意<loading><button>的显示隐藏,实际指的是js里相关值的改变
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。