小程序实践(八):验证码倒计时功能

作者:分分快三计划

2、true,隐蔽的时候

 

小程序实施(七):页面间传值

  wxml文件中

 

 

小程序试行(生龙活虎):主页tab选项完毕

// 倒计时事件 单位s
var countdown = 10;
var settime = function (that) {
  if (countdown == 0) {
    that.setData({
      codeIsCanClick: true
    })
    countdown = 10;
    return;
  } else {
    that.setData({
      codeIsCanClick: false,
      last_time: countdown
    })
    countdown--;
  }

  setTimeout(function () {
    settime(that)
  }, 1000
  )
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    codeIsCanClick: true
  },

  /**
   * 点击验证码按钮
   */
  clickCode: function () {
    var that = this;

    settime(that)
  },

小程序试行(六):view内部组件排版

 

小程序施行(四):动态调整组件的来得/隐敝

  然后在js中写逻辑代码:

 

 

部件有个脾性:hidden='' ,值为true/false ,当false的时候证实不掩瞒,当true的时候证实掩瞒,注意该隐瞒是不保留组件地方的。

小程序履行(三):九宫格达成及item跳转


  注意button有七个,分别对应的未点击和点击下的按键样子,用js中的CodeIsCanClick调控突显掩没

二、在.wxml文件下构建一个view组件

 

实现即 .js 配合.wxml 文件

小程序实施(七):页面间传值

 

 

 

.centerRow{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  border-bottom: 1rpx solid #D9D9D9;
  border-top: 1rpx solid #D9D9D9;
}

.inputStyle{
  border-radius:4px;
  color:#D9D9D9;
  outline:0;
  padding-left: 4px;
  margin-left: 4px;
  margin-right: 20rpx;
  font-size: 14px;
}

.inputLabel{
  font-size: 16px;
  color: #33496D;
  width: 90px;
}

.emailCode{
  width: 118px;
  height: 28px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  color:white;
  font-size: 14px;
  background-color: #50A2EC;
  border-radius: 14px;
}

.emailCodeSend{
  width: 118px;
  height: 28px;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
  color:white;
  font-size: 14px;
  background-color: #B9DAF7;
  border-radius: 14px;
}

 

小程序施行(四):动态调节组件的显得/掩盖

 

<view class='centerRow'>
  <view class='inputLabel'>动态码:</view>
  <input class='inputStyle' style="flex:1 " bindinput="bindKeyInput" placeholder="短信动态码" adjust-position='false'       confirm-type='search'></input>
  <button class="emailCode" hidden='{{!codeIsCanClick}}' size="mini" bindtap='clickCode'>获取动态码</button>
  <button class="emailCodeSend" hidden='{{codeIsCanClick}}' size="mini">{{last_time}}秒后重新发送</button>
</view>

小程序实行(三):九宫格达成及item跳转

  

小程序实行(二):swiper组件完毕轮播图效果

  

风华正茂、在.js 文件下的 Page({}卡塔尔国 里面的data:{} 里面 创制贰个布尔类型的习性

小程序实行(二):swiper组件完成轮播图效果

  图片 1

小程序实践(六):view内部组件制版

  图片 2

小程序实践(五):for循环绑定item的点击事件

  图片 3

 

验证:


1、false,不掩盖的时候

   


 

小程序实践(八):验证码倒计时功用

  以上整合页面静态效果。

  图片 4

  首先js文件的data里面 声爱他美个变量用于表示这段日子是还是不是能够点击,codeIsCanClick = true,  暗中同意是能够点击的

小程序施行(五):for循环绑定item的点击事件

图片 5

 

  写下分界面代码:

 

小程序实施(八):验证码倒计时效率

   对应样式 wxss文件:

 效果如下:点击发送验证码开关,开关背景变色,不可点击,展现倒计时文字

小程序实行(生龙活虎):主页tab选项达成

 

本文由分分快三计划发布,转载请注明来源

关键词: 分分快三计划