微信小程序實現登錄界面示例
本文實例為大傢分享瞭微信小程序實現登錄界面的具體代碼,供大傢參考,具體內容如下
註:這裡使用的是原生微信小程序
使用wxss和wxml
index.wxml文件中代碼
<view class="v1"> <!-- v2父容器 子view使用絕對佈局 --> <view class="v2"> <view class="dltext">登錄</view> <!-- 手機號 --> <view class="phoneCs"> <image src="/images/phone.png" class="ph"></image> <input placeholder="請輸入手機號" /> </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> <!-- 協議區 xieyi --> <view class="xieyi"> <checkbox class="isXY"></checkbox> <view class="text-xy">同意小程序的《使用協議》</view> </view> </view> <!-- 提示框 使用以下方式登錄 --> <view class="v3"> <view class="line"></view> <view class="lText">您還可以使用以下方式登錄</view> <view class="line"></view> </view> <!-- qq weixin weibo 圖標展示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; /* 換圖片 */ } /* 白色區域 */ .v1 .v2{ position: relative; margin-top: 150rpx; left: 100rpx; width: 545rpx; height: 750rpx; background: #FFFFFF; border-radius: 50rpx; } /* 白色區域內的登錄文本 */ .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; } /* 手機圖片+輸入框+下劃線的父容器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); } /* 手機圖標 */ .v1 .v2 .phoneCs .ph{ margin-top: 5rpx; margin-left: 30rpx; width: 55rpx; height: 55rpx; } /* 手機號輸入框 */ .v1 .v2 .phoneCs input{ width: 200rpx; font-size: 25rpx ; margin-top: 15rpx; margin-left: 30rpx; } /* 密碼圖標+輸入框+小眼睛圖標+下劃線父容器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); } /* 密碼圖標 */ .v1 .v2 .passwordCs .ps{ margin-top: 5rpx; margin-left: 30rpx; width: 55rpx; height: 55rpx; } /* 眼睛 圖標*/ .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; } /* 復選框+協議文字容器view */ .v1 .v2 .xieyi{ margin-left: 10rpx; margin-top: 680rpx; width: 400rpx; display: flex; position: absolute; } /* 復選框 */ .v1 .v2 .xieyi .isXY{ margin-left: 85rpx; /* 修改復選框的大小 */ transform:scale(.6); } /* 協議文本 */ .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; }
結果圖
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。