微信小程序?qū)崿F(xiàn)登錄界面示例
更新時(shí)間：2022年05月22日 10:28:50 作者：￡白晝の星☆
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)登錄界面示例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)登錄界面的具體代碼，供大家參考，具體內(nèi)容如下
注：這里使用的是原生微信小程序
使用wxss和wxml
index.wxml文件中代碼
<view class="v1"> ? <!-- v2父容器 ?子view使用絕對布局 --> ? <view class="v2"> ? ? <view class="dltext">登錄</view> ? ? ? <!-- 手機(jī)號 --> ? ? <view class="phoneCs"> ? ? ? <image src="/images/phone.png" class="ph"></image> ? ? ? <input placeholder="請輸入手機(jī)號" /> ? ? </view> ? ? ? <!-- 密碼 --> ? ? <view class=passwordCs"> ? ? ? <image src="/images/password.png" class="ps"></image> ? ? ? <input placeholder="請輸入密碼" /> ? ? ? <image src="/images/eye-open.png" class="eye"></image> ? ? </view> ? ? ? <!-- 注冊 和忘記密碼 ?--> ? ? <view class="zhuce"> ? ? ? <navigator>立即注冊</navigator> ? ? ? <navigator>忘記密碼?</navigator> ? ? </view> ? ? ? <!-- 登錄按鈕 --> ? ? <view class="denglu"> ? ? ? <button class="btn-dl" type="primary">登錄</button> ? ? </view> ? ? ? <!-- 協(xié)議區(qū) ?xieyi --> ? ? <view class="xieyi"> ? ? ? <checkbox class="isXY"></checkbox> ? ? ? <view class="text-xy">同意小程序的《使用協(xié)議》</view> ? ? </view> ? </view> ? <!-- 提示框 ?使用以下方式登錄 --> ? <view class="v3"> ? ? <view class="line"></view> ? ? <view class="lText">您還可以使用以下方式登錄</view> ? ? <view class="line"></view> ? </view> ? <!-- qq ?weixin ?weibo 圖標(biāo)展示view --> ? <view class="qwwIcon"> ? ? <image src="/images/weixin.png"></image> ? ? <image src="/images/qq.png"></image> ? ? <image src="/images/weibo.png"></image> ? </view> ? </view>
index.wxss樣式文件代碼（使用絕對布局和相對布局）
/* 最大的父元素 */
.v1{
? display: block;
? position:absolute;
? height: 100%;
? width: 100%;
? background: #356363;
? /* 換圖片 */
??
}
/* 白色區(qū)域 */
.v1 .v2{
? position: relative;
? margin-top: 150rpx;
? left: 100rpx;?
? width: 545rpx;
? height: 750rpx;
? background: #FFFFFF;
? border-radius: 50rpx;
}
/* 白色區(qū)域內(nèi)的登錄文本 */
.v1 .v2 .dltext{
? margin-top: 50rpx;
? position: absolute;
? margin-left:80rpx;
? width: 150rpx;
? height: 100rpx;
? font-size: 60rpx;
? font-family: Helvetica;
? color: #000000;
? line-height: 100rpx;
? letter-spacing: 2rpx;
}
/* 手機(jī)圖片+輸入框+下劃線的父容器view */
.v1 .v2 .phoneCs{
? margin-top: 200rpx;
? margin-left: 35rpx;
? position: absolute;
? display: flex;
? width:450rpx ;
? height: 80rpx ;
? border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 手機(jī)圖標(biāo) */
.v1 .v2 .phoneCs .ph{
? margin-top: 5rpx;
? margin-left: 30rpx;
? width: 55rpx;
? height: 55rpx;
}
/* 手機(jī)號輸入框 */
.v1 .v2 .phoneCs input{
? width: 200rpx;
? font-size: 25rpx ;
? margin-top: 15rpx;
? margin-left: 30rpx;
}
/* 密碼圖標(biāo)+輸入框+小眼睛圖標(biāo)+下劃線父容器view */
.v1 .v2 .passwordCs{
? margin-top: 400rpx;
? margin-left: 35rpx;
? position: absolute;
? display: flex;
? width:450rpx ;
? height: 80rpx ;
? border-bottom: 3rpx solid rgb(58, 57, 57);
}
/* 密碼圖標(biāo) */
.v1 .v2 .passwordCs .ps{
? margin-top: 5rpx;
? margin-left: 30rpx;
? width: 55rpx;
? height: 55rpx;
}
/* 眼睛 圖標(biāo)*/
.v1 .v2 .passwordCs .eye{
? margin-top: 5rpx;
? margin-left: 65rpx;
? width: 55rpx;
? height: 55rpx;
}
/* 密碼輸入框 */
.v1 .v2 .passwordCs input{
? width: 200rpx;
? font-size: 25rpx ;
? margin-top: 15rpx;
? margin-left: 30rpx;
}
/* 注冊+忘記密碼父容器 */
.v1 .v2 .zhuce{
? font-size: 25rpx;
? margin-left: 85rpx;
? width: 370rpx;
? margin-top: 540rpx;
? position: absolute;
? display: flex;
? justify-content: space-between;
}
/* 登錄按鈕容器view */
.v1 .v2 .denglu{
? width: 350rpx;
? height: 50rpx;
? position: absolute;
? margin-top: 600rpx;
? margin-left: 85rpx;
??
}
/* 登錄按鈕 */
.v1 .v2 .denglu button{
? padding: 0rpx;
? line-height: 50rpx;
? font-size: 25rpx;
? width: 100%;
? height: 100%;
? border-radius: 30rpx;
}
/* 復(fù)選框+協(xié)議文字容器view */
.v1 .v2 .xieyi{
? margin-left: 10rpx;
? margin-top: 680rpx;
? width: 400rpx;
? display: flex;
? position: absolute;
}
/* 復(fù)選框 */
.v1 .v2 .xieyi .isXY{
? margin-left: 85rpx;
? /* 修改復(fù)選框的大小 */
? transform:scale(.6);
}
/* 協(xié)議文本 */
.v1 .v2 .xieyi .text-xy{
? margin-left: 10rpx;
? margin-top: 20rpx;
? color: #000000;
? font-size:18rpx;
}
/* 提示文本 */
.v3{
? padding-left: 100rpx;
? display: flex;
? position: relative;
? width: 100%;
? height: 60rpx;
? padding-top: 50rpx;
}
.v3 .line{
? margin-left: 5rpx;
? margin-top: 18rpx;
? width: 120rpx;
? height: 3rpx;
?background-color:#FFFFFF;
}
.v3 .lText{
? color: #FFFFFF;
? font-size: 25rpx;
}
/* qq wx wb */
.qwwIcon{
? margin-top: 100rpx;
? padding-top: 50rpx;
? position: relative;
? display: flex;
? width: 100%;
? height: 150rpx;
}
.qwwIcon image{
? padding-left: 120rpx;
? width: 80rpx;
? height: 80rpx;
}結(jié)果圖
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
數(shù)組去重，一般都是在面試的時(shí)候才會碰到，一般是要求手寫數(shù)組去重方法的代碼。如果是被提問到，數(shù)組去重的方法有哪些？你能答出其中的10種，面試官很有可能對你刮目相看2019-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript中常見加密解密方法的實(shí)現(xiàn)，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以了解一下
2023-03-03 
這篇文章主要為大家詳細(xì)介紹了CountUp.js數(shù)字滾動插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10 
這篇文章主要介紹了微信小程序select下拉框?qū)崿F(xiàn)源碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-11-11 
這篇文章主要介紹了詳解Webpack多環(huán)境代碼打包的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08 
Bootstrap布局之柵格系統(tǒng)學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了Bootstrap布局之柵格系統(tǒng)的學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05 
JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁面圖片切換功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)滾輪控制頁面圖片切換功能,涉及javascript事件響應(yīng)及頁面元素動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-10-10 
JavaScript模擬實(shí)現(xiàn)鍵盤打字效果
這篇文章主要介紹了JavaScript模擬實(shí)現(xiàn)鍵盤打字效果,本文直接給出實(shí)例代碼,需要的朋友可以參考下
2015-06-06 
基于JavaScript實(shí)現(xiàn)一個(gè)動態(tài)脫敏指令
數(shù)據(jù)脫敏是指在不影響數(shù)據(jù)分析結(jié)果的準(zhǔn)確性前提下,對原始數(shù)據(jù)中的敏感字段進(jìn)行處理,從而降低數(shù)據(jù)敏感度和減少個(gè)人隱私風(fēng)險(xiǎn)的技術(shù)措施,下面我們就來看看如何實(shí)現(xiàn)一個(gè)動態(tài)脫敏指令吧
2024-12-12