欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

值得记录的 (三)

程序员文章站 2022-05-18 22:53:22
函数防抖 使用函数节流实现防止用户多次快速点击后触发事件。 短信验证码 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>