微信小程序?qū)崿F(xiàn)登錄注冊界面

更新時間：2022年08月24日 15:55:48 作者：JefferyTan.

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登錄注冊界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)登錄注冊界面的具體代碼，供大家參考，具體內(nèi)容如下

微信小程序登錄注冊界面demo,存在不足之處,請指教!

界面圖片：

1.js代碼：

Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? current:1,
? ? codeText:'獲取驗證碼',
? ? counting:false,
? },
? // 登陸注冊監(jiān)聽
? click(e){
? ? let index = e.currentTarget.dataset.code;
? ? this.setData({
? ? ? current:index
? ? })
? },
? //獲取驗證碼?
? getCode(){
? ? var that = this;
? ? if (!that.data.counting) {
? ? ? wx.showToast({
? ? ? ? title: '驗證碼已發(fā)送',
? ? ? })
? ? ? //開始倒計時60秒
? ? ? that.countDown(that, 60);
? ? }?
? },
? //倒計時60秒
? countDown(that,count){
? ? if (count == 0) {
? ? ? that.setData({
? ? ? ? codeText: '獲取驗證碼',
? ? ? ? counting:false
? ? ? })
? ? ? return;
? ? }
? ? that.setData({
? ? ? counting:true,
? ? ? codeText: count + '秒后重新獲取',
? ? })
? ? setTimeout(function(){
? ? ? count--;
? ? ? that.countDown(that, count);
? ? }, 1000);
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad(options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide() {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload() {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh() {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom() {

? },

? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage() {

? }
})

2.wxml代碼：

<view class="top-box">
? <view>Hi</view>
? <view class="next-text">歡迎使用！</view>
</view>
<!-- 登錄、注冊 -->
<view class="center-box">
? <view class="nav">
? ? <view class="left {{current==1?'select':''}}" bindtap="click" data-code="1">
? ? ? <text>登錄</text>
? ? </view>
? ? <view class="right {{current==0?'select':''}}" bindtap="click" data-code="0">
? ? ? <text>注冊</text>
? ? </view>
? </view>
? <!-- 登錄 -->
? <view class="input-box" hidden="{{current==0}}">
? ? <view class="wei-input">
? ? ? <icon type="waiting" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請輸入手機號/登錄名"/>
? ? </view>
? ? <view class="wei-input">
? ? ? <icon type="success" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請輸入登錄密碼"/>
? ? </view>
? ? <view class="forget">
? ? ? <text>忘記密碼?</text>
? ? </view>
? </view>
? <!-- 注冊 -->
? <view class="input-box" hidden="{{current==1}}">
? ? <view class="wei-input">
? ? ? <icon type="waiting" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請輸入手機號"/>
? ? </view>
? ? <view class="wei-input">
? ? ? <icon type="waiting" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請輸入6位驗證碼"/>
? ? ? <text class="input-code" bindtap="getCode">{{codeText}}</text>
? ? </view>
? ? <view class="wei-input">
? ? ? <icon type="success" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請輸入密碼"/>
? ? </view>
? ? <view class="wei-input">
? ? ? <icon type="success" color="#44ADFB" size="16"></icon>
? ? ? <input class="input" auto-focus placeholder="請確認密碼"/>
? ? </view>
? </view>
? <view class="sumbit-btn">
? ? <button class="button"?
? ? style="background-color: #33ccff;font-size: 30rpx;"?
? ? type="primary">立即{{current==1?'登錄':'注冊'}}</button>
? </view>
</view>
<!-- 重影 -->
<view class="shadow shadow-1"></view><view class="shadow shadow-2"></view>
<!-- 說明 -->
<view class="bottom-box">
? demo·開源·點贊·收藏·打賞·Jeffery~
</view>

3.wxss代碼：

page{
? height: 100%;
? background-color: white;
? margin: 0px;
? padding: 0px;
}
/* 頂部背景 */
.top-box{
? height: 30%;
? background-image: linear-gradient( #44ADFB,#5ed6fd);
? padding: 30rpx;
? color: white;
? font-weight: bold;
}
.next-text{
? margin-top: 15rpx;
}
/* 內(nèi)容 */
.center-box{
? background-color: white;
? margin: -20% 20rpx 0rpx 20rpx;
? padding: 25rpx;
? border-radius: 15rpx;
? -webkit-filter: drop-shadow(0 0 8rpx #44ADFB);
? filter: drop-shadow(0 0 8rpx #44ADFB);
}
/* 導航 */
.nav{
? display: flex;
? text-align: center;
? font-size: 32rpx;
? margin-bottom: 8%;
}
.left{
? flex: 1;
? font-weight: bold;
}
.right{
? flex: 1;
? font-weight: bold;
}
.select{
? font-weight: bold;
? color: #33ccff;
}
.select text{
? padding-bottom: 5rpx;
? border-bottom-left-radius: 10rpx;
? border-bottom-right-radius: 10rpx;
? border-bottom: 5rpx solid #33ccff;
}
.wei-input{
? display: flex;
? flex-direction: row;
? align-items: center;
? margin-top: 40rpx;
? padding-bottom: 20rpx;
? border-bottom: 1rpx solid #f1f1f1;
}
.input-box{
? margin: 20rpx;
}
.input{
? padding-left: 20rpx;
? font-size: 30rpx;
}
.input-code{
? position: absolute;
? right: 40rpx;
? font-size: 26rpx;
? padding: 10rpx 15rpx;
? color: white;
? background-color: #FF8C69;
? border-radius: 10rpx;
}
.forget{
? font-size: 26rpx;
? color: #33ccff;
? margin-top: 20rpx;
? text-align: right;
}
.sumbit-btn{
? margin: 6% 30rpx 30rpx 30rpx;
}
/* 重影 */
.shadow{
? box-shadow: 0rpx 0rpx 10rpx 0rpx #44ADFB;
? border-radius: 25rpx;
? background-color: white;
}
.shadow-1{
? height: 40rpx;
? margin: -20rpx 50rpx 0 50rpx;
}
.shadow-2{
? position: relative;
? z-index: -888;
? height: 50rpx;
? margin: -30rpx 80rpx 0 80rpx;
}
/* 最底部 */
.bottom-box{
? position:fixed;?
? bottom: 10rpx;
? width:100%;
? font-size: 24rpx;
? color: gray;
? display: flex;
? justify-content: center;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: