值得记录的（三）

发布时间：2020-12-16 23:42:10 所属栏目：百科来源：网络整理

导读：函数防抖使用函数节流实现防止用户多次快速点击后触发事件。 // 多次点击节流防抖 function debounce(func,wait = 500 ) { let timeout; return function (event) { clearTimeout(timeout); timeout = setTimeout(() = { func.call( this ,event) },wait);

函数防抖

使用函数节流实现防止用户多次快速点击后触发事件。

// 多次点击节流防抖
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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

值得记录的 （三）

函数防抖

短信验证码

WXML

JS

wx-if

值得记录的（三）