国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序實戰之登錄頁面制作(5)

2019-11-19 16:48:10
字體:
來源:轉載
供稿:網友

提供一個登錄頁的案例,供同學們使用

項目效果圖:


目錄結構:


圖片資源:

name.png


key.png


loginLog.jpg


login.wxml:

<view class="container">  <view class="login-icon">  <image class="login-img" src="../images/loginLog.jpg"></image>  </view>  <view class="login-from">   <!--賬號-->  <view class="inputView">   <image class="nameImage" src="../images/name.png"></image>   <label class="loginLab">賬號</label>   <input class="inputText" placeholder="請輸入賬號" bindinput="phoneInput" />  </view>  <view class="line"></view>   <!--密碼-->  <view class="inputView">   <image class="keyImage" src="../images/key.png"></image>   <label class="loginLab">密碼</label>   <input class="inputText" password="true" placeholder="請輸入密碼" bindinput="passwordInput" />  </view>   <!--按鈕-->  <view class="loginBtnView">   <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登錄</button>  </view>  </view> </view> 

login.wxss:

page{  height: 100%; }  .container {  height: 100%;  display: flex;  flex-direction: column;  padding: 0;  box-sizing: border-box;  background-color: #f2f2f2 }  /*登錄圖片*/ .login-icon{  flex: none; } .login-img{  width: 750rpx; }  /*表單內容*/ .login-from {  margin-top: 20px;  flex: auto;  height:100%; }  .inputView {  background-color: #fff;  line-height: 44px; } /*輸入框*/ .nameImage, .keyImage {  margin-left: 22px;  width: 14px;  height: 14px }  .loginLab {  margin: 15px 15px 15px 10px;  color: #545454;  font-size: 14px } .inputText {  flex: block;  float: right;  text-align: right;  margin-right: 22px;  margin-top: 11px;  color: #cccccc;  font-size: 14px }  .line {  width: 100%;  height: 1px;  background-color: #cccccc;  margin-top: 1px; } /*按鈕*/ .loginBtnView {  width: 100%;  height: auto;  background-color: #f2f2f2;  margin-top: 0px;  margin-bottom: 0px;  padding-bottom: 0px; }  .loginBtn {  width: 80%;  margin-top: 35px; } 

login.js:

Page({  data: {  phone: '',  password:''  },  // 獲取輸入賬號  phoneInput :function (e) {  this.setData({   phone:e.detail.value  })  },  // 獲取輸入密碼  passwordInput :function (e) {  this.setData({   password:e.detail.value  })  },  // 登錄  login: function () {  if(this.data.phone.length == 0 || this.data.password.length == 0){   wx.showToast({   title: '用戶名和密碼不能為空',   icon: 'loading',   duration: 2000   }) }else {  // 這里修改成跳轉的頁面   wx.showToast({   title: '登錄成功',   icon: 'success',   duration: 2000   })  }  } }) 

運行結果


以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 芜湖市| 全州县| 三明市| 泰州市| 封开县| 九江市| 平邑县| 白河县| 微山县| 会宁县| 大埔县| 南康市| 汉源县| 什邡市| 万州区| 揭阳市| 永济市| 泸定县| 平泉县| 江安县| 赤城县| 建宁县| 尚志市| 松滋市| 永善县| 藁城市| 黑水县| 田林县| 安陆市| 潼南县| 闻喜县| 丰顺县| 永春县| 阳春市| 文成县| 英超| 襄樊市| 江西省| 汉川市| 辽宁省| 绥芬河市|