标签:防止 cal cat false 输入验证 格式化 不必要 maxlength api
使用函数节流实现防止用户多次快速点击后触发事件。
// 多次点击节流防抖 function debounce(func, wait = 500) { let timeout; return function (event) { clearTimeout(timeout); timeout = setTimeout(() => { func.call(this, event) }, wait); }; }
<view class="phone_area"> <view class="phone_area_number"> <view class="phone_area_title">请输入手机号:</view> <input class="phone_area_input" bindinput="bindnumbervalue" maxlength="11">{{phone_number}}</input> </view> <view class="phone_area_code"> <view class="phone_area_title">请输入验证码:</view> <input class="phone_area_input" bindinput="bindcodevalue" maxlength="4">{{phone_code}}</input> <view class="get_code_button" bindtap=‘verification‘>{{phone_code_text}}</view> </view> </view>
验证码倒计时模块,(可能有误,后续待测试)
Page({ data: { // 手机验证码 phone_number: ‘‘, // 手机号 phone_code_text: ‘获取验证码‘, // 按钮提示信息 phone_code: ‘‘, // 验证码 status: true, }, // 手机输入 bindnumbervalue(event){ this.setData({ phone_number: event.detail.value }) }, // 验证码功能 bindcodevalue(event){ this.setData({ phone_code: event.detail.value }) }, // 点击获取验证码 并添加 debounce 节流防抖 verification: debounce(function(e){ if((this.data.phone_number).length !== 11){ wx.showToast({ title: ‘请输入正确的手机号‘, icon: ‘none‘ }) return } // 此处需要调用api接口, 假设返回 code 0 ,成功. 返回其他 return console.log(this.data.status) if (this.data.status === false) { return } var _this = this var code_number = 60 // 定义 60 秒的倒计时 var code_value = setInterval(function () { _this.setData({ phone_code_text: ‘重新获取‘ + (--code_number) + ‘s‘, status: false }) if (code_number == 0) { clearInterval(code_value) _this.setData({ phone_code_text: ‘获取验证码‘, status: true, }) } }, 1000) }), })
wx-if
结合 new Date()
实现条件渲染
双 11 活动信息弹窗广告倒计时 background,通过
wx-if
结合new Date()
实现格式化实现最后三天自行判断。省去了双 11 期间重新修改代码上传版本的不必要操作。并且在活动最后一天自动消失,之后再删除冗余代码重新迭代版本即可。
onLoad: function () { var timeDay = new Date().getDate(); var timeMonth = new Date().getMonth() var timeYear = new Date().getFullYear(); this.setData({ timeDay: timeDay, timeMonth: timeMonth + 1, timeYear: timeYear, }); },
<!-- 活动时间 --> <view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 9}}" class="newBg" hidden="{{hiddenName}}"> <image src=‘https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-3.png‘></image> <view class="close" catchtap=‘closeBg‘>关闭 {{sec}}</view> </view> <view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 10}}" class="newBg" hidden="{{hiddenName}}"> <image src=‘https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-2.png‘></image> <view class="close" catchtap=‘closeBg‘>关闭 {{sec}}</view> </view> <view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 11}}"> <image src=‘https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-1.png‘></image> <view class="close" catchtap=‘closeBg‘>关闭 {{sec}}</view> </view>
标签:防止 cal cat false 输入验证 格式化 不必要 maxlength api
原文地址:https://www.cnblogs.com/evenyao/p/9938430.html