函數防抖 使用函數節流實現防止用戶多次快速點擊後觸發事件。 簡訊驗證碼 WXML JS 驗證碼倒計時模塊,(可能有誤,後續待測試) wx-if wx-if 結合 new Date() 實現條件渲染 雙 11 活動信息彈窗廣告倒計時 background,通過 wx-if 結合 new Date() ...
函數防抖
使用函數節流實現防止用戶多次快速點擊後觸發事件。
// 多次點擊節流防抖 function debounce(func, wait = 500) { let timeout; return function (event) { clearTimeout(timeout); timeout = setTimeout(() => { func.call(this, event) }, wait); }; }
簡訊驗證碼
WXML
<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>
JS
驗證碼倒計時模塊,(可能有誤,後續待測試)
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
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>