微信小程序自定义提示框制作的简单方法

微信小程序自定义提示框制作的简单方法

下面的时候提示框的结构

wxml部分

<!-- 提示框 -->
<view class="showToast" wx:if="{{show}}">
   <view class="showToast_item">{{language == 'uy' ? 'سىز كىرگۈزگەن كىملىك نۇمۇرىدا خاتالىق با ، قايتىدىن كىرگۈزۈڭ' : '您输入的身份证号码有错误，请您重新输入'}}</view>
</view>

wxss部分

/* 提示框 */
.showToast{
  top: 500rpx;
  position: fixed;
  text-align: center;
  min-height: 50rpx;
  background: rgb(160, 160, 160);
  margin: 0 120rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 2rpx 2rpx rgb(206, 206, 206);
}
.showToast_item{
  color: white;
  padding: 20rpx 20rpx;
}

js部分

// pages/information/information.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    user_number:'',    showtoast_timer:4,
  },

    // 获取身份证号码
    gouser_number(e){
      var _this = this
      let value = e.detail.value
      let language = this.data.language
      let showtoast_timer = this.data.showtoast_timer
      var idCardReg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;   //身份证号码验证
      _this.setData({
        user_number : value
      })
      let user_number = _this.data.user_number
      if (!idCardReg.test(user_number) || null) {
        // 开启定时器
        let showtimer = setInterval(function() {
          showtoast_timer--
          _this.setData({
            show : 1,
            showtoast_timer : showtoast_timer
          })
          if (showtoast_timer === 0) {
            // 关闭定时器
            clearInterval(showtimer)
            _this.setData({
              show:0,
            })
          }
          _this.setData({
            user_number : ''
          })
        }, 1000)
      }else{
        this.setData({
          user_number : value
        })
      }
      return showtoast_timer = 4;
    },

    
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

最后的结果图