小程序中简单的一些操作综

布满荆棘的人生 2022-05-22 01:49 211阅读 0赞

小程序中要实现的效果：

![2018061218383456][]

(1.) 点击获取验证码时获取表单数据 及 获取验证码后时间倒计：

wxml:

<view class="input-border input-view-mobile">
        <view class="fl input-name">联系电话</view>
        <view class="fl input-value">
            <input class="fl" style="width: 35vw" placeholder="请输入联系电话" placeholder-class="place_input" bindinput="mobileInputEvent" name="mobile"/>
            <button class="input-submit {
       {codeStatus ? 'display_none' : ''}}" bindtap="mobileCode" size="0">获取验证码</button>
            <button class="input-submit {
       {codeStatus ? '' : 'display_none'}}" disabled size="0">{
      {codeTime}}s后再次获取</button>
        </view>
        <view class="clear"></view>
    </view>
    
    <view class="input-border input-view-name">
        <view class="fl input-name">验证码</view>
        <view class="fl input-value">
            <input placeholder="请输入验证码" placeholder-class="place_input" name="code"/>
        </view>
        <view class="clear"></view>
    </view>

js:

/** * 获取手机号 * @param e (mobile) */ mobileInputEvent : function (e) {
        let that = this;
        let mobile = e.detail.value;
        that.setData({
            mobile : mobile
        });
    
    },

/** * 点击获取验证码 */ mobileCode : function () {
        let that = this;
        if(!that.data.mobile) {
            utils.showDialog(that, '请填写联系电话');
            that.setData({
       loading:false});
            return false;
        } else if(!utils.isMobile(that.data.mobile)) {
            utils.showDialog(that, '手机格式错误');
            that.setData({
       loading:false});
            return false;
        }
        that.setData({
            codeStatus : true });
        that.timeStart(that);
        //网络请求
    },

/** * 开始倒计时60s * @param app this */ timeStart : function (app) {
        let that = this;
        let intervalId = setInterval(function () {
            that.data.codeTime--;
            app.setData({
                codeTime : that.data.codeTime,
            });
            if(that.data.codeTime < 0) {
                clearInterval(intervalId);
                app.setData({
                    codeStatus : false });
                return false;
            }
        }, 1000);
    },

(2.) 实现密码的显示与隐藏：

wxml:

js:

/** * 以下是密码显示隐藏 切换 * 对应 ： * passInputEvent ---- passChange */ passInputEvent : function (e) {
        let that = this;
        that.setData({
            password : e.detail.value
        });
    },
    
    /** * 点击查看按钮是更新状态 */ passChange : function () {
        let that = this;
        let showPassPic;
        if(that.data.showPassPic) {
            showPassPic = false;
        } else {
            showPassPic = true;
        }
        that.setData({
            showPassPic : showPassPic,
        });
    },

[2018061218383456]: /images/20220522/98ace235b08a43bca0a7bbcfaa822aed.png