本文主要是介绍微信小程序(四十五)登入界面-简易版,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
注释很详细,直接上代码
上一篇
此文使用了vant组件库,没有安装配置的可以参考此篇vant组件的安装与配置
新增内容:
1.基础组件的组合
2.验证码倒计时的逻辑处理
源码:
app.json
{"usingComponents": {"van-field": "@vant/weapp/field/index","van-count-down": "@vant/weapp/count-down/index","van-button": "@vant/weapp/button/index"},"pages": ["pages/index/index"],"window": {"navigationBarTextStyle": "black","navigationBarTitleText": "Weixin","navigationBarBackgroundColor": "#ffffff"},"componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}
index.wxml
<view class="login-header"><view class="label">用户登入</view>
</view>
<view class="login-form"><van-cell-group><!-- 1.type 控制弹出手机键盘的类型2.maxlength 控制最大长度3.use-slot使用插槽4.placeholder-style占位内容样式--><van-field placeholder="请输入手机号码" type="number" maxlength="{{11}}" use-slot placeholder-style="color: #999999;"><!-- slot在官方文档里面有几个特定的类型,可以自己找来康康 --><view wx:if="{{!countDownVisble}}" slot="button"><van-button size="small" type="primary" bind:tap="sendCode">发送验证码</van-button></view><!-- 稍微调整一下文字位置 --><view slot="right-icon" wx:else style="margin-top: -20rpx;"><!-- 倒计时组件 --><!-- 1. time计时时常单位毫秒2.bind:change时间变化触发--><van-count-down use-slot time="{{60*1000}}" bind:change="countDownChange"><text style="color: #999999; ">{{timeData.seconds}}秒后重新获取</text></van-count-down></view></van-field><van-field placeholder="请输入6位数验证码" maxlength="{{6}}" placeholder-style="color:#999999" /></van-cell-group><view class="login-tip">未注册的手机号验证后将自动注册</view>
</view><!-- 在行内写样式,如果在css文件里要提高权值才行 -->
<button size="mini" style="margin:30rpx 0 0 300rpx; background-color: palegreen; padding: 0 50rpx;">登入</button>
index.wxss
.label{font: 1em SimHei;font-size: 50rpx;margin: 60rpx 0 50rpx 30rpx;
}.login-tip{margin: 20rpx 0 90rpx 30rpx;color: #dadada;font-size: 27rpx;
}
index.js
Page({data:{countDownVisble:false,//是否显示倒计时timeData: {}//时间数据},//发送验证码sendCode(){this.setData({countDownVisble:true})},//倒计时变化countDownChange(ev){//console.log(ev)this.setData({//倒计时组件数据timeData:ev.detail,//倒计时是否显示判断countDownVisble:ev.detail.minutes===1||ev.detail.seconds>0})}
})
效果演示:(更加完善的会后续更新)
这篇关于微信小程序(四十五)登入界面-简易版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!