最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
微信小程序实现登录遮罩效果
时间:2022-06-25 15:30:37 编辑:袖梨 来源:一聚教程网
目标:
用户点击提交、登录等按钮时,防止多次提交,所做的遮罩层
步骤:
实现很简单,按钮加上disabled属性,用true和false控制。
效果图:
代码:
wxml
登录中...
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: