cordova+famous实战篇（2）——登录页面 - PhoneGap中文网

首先我们编写登录页面。在写代码之前，大家可以看看Cordova+Famous的常用属性(看我看我~)，了解这些基本属性的作用，达到事半功倍的效果。

页面分析
1.一个手机页面大致分为头、中、尾三部分。在这个页面中，由于没有尾部，我们可以把整体分为头、中两部分。
2.在famous中，我们可以把可点击区域和非可点击区域划分出来。从页面中可以看出，除了logo，其余的都是可点击区域。

var Node = require('famous/core/Node');
var DOMElement = require('famous/dom-renderables/DOMElement');

function login(){

//给页面创建节点，并且定义id为login
new DOMElement(this,{
id:'login'
})

Node.call(this);

}

login.prototype = Object.create(Node.prototype);

module.exports = login;

this.head = this.addChild();//新建页面子元素
this.head.setSizeMode('absolute','absolute')//声明定位方式
.setAbsoluteSize(40,40)//声明元素大小
//创建节点
this.head.el = new DOMElement(this.head,{
classes:['login_head']//节点class名称
});

复制代码

html{
height: 100%;
}

#login{
background: url('../img/login_bg.png') center no-repeat;
background-size: cover;
}

.login_head{
background: url('../img/back.png') center no-repeat;
background-size: 50%;
}

d：
D:\test\MyApp
gulp && cordova run browser

this.content = this.addChild();
this.content.setDifferentialSize(0,-40)//由于头部占了40px,这里高度需要减少40px
                        .setPosition(0,40)//定位距离顶部40px

this.content.el = new DOMElement(this.content,{
      classes:['login_content'],
      content:'<img src="img/user_pic.png"/>'//加入logo图片
})

this.phoneTxt = this.content.addChild();//加入账号输入框
this.phoneTxt.setSizeMode('relative','absolute')
         .setAbsoluteSize(null,40)
         .setProportionalSize(0.9)//宽度百分比90%
         .setAlign(0.05)//距离左边5%
         .setPosition(0,160)//距离父元素顶部160px

this.phoneTxt.el = new DOMElement(this.phoneTxt,{
      classes:['phoneTxt'],
      content:
      '<img src = "img/user.png"/>'+//加入图标
      '<input type="text" placeholder="手机号码"/>'//加入输入框标签
})

//登录密码输入框
this.phonepas = this.content.addChild();
this.phonepas.setSizeMode('relative','absolute')
         .setAbsoluteSize(null,40)
         .setProportionalSize(0.9)
         .setAlign(0.05)
         .setPosition(0,220)

this.phonepas.el = new DOMElement(this.phonepas,{
      classes:['phonepas'],
      content:
      '<img src ="img/lock.png"/>'+
      '<input type = "text" placeholder="密码"/>'+
      '<img src = "img/nosee.png"'
});

//登录按钮
this.submit = this.content.addChild();
this.submit.setSizeMode('relative','absolute')
         .setAbsoluteSize(null,50)
         .setProportionalSize(0.9)
         .setAlign(0.05)
         .setPosition(0,350)

this.submit.el = new DOMElement(this.submit,{
      classes:['login_submit'],
      content:'登录'
})

.phoneTxt{
background: #fcc8d9;
border-radius: 20px;
border-radius: 30px;
}
.phoneTxt img{
width:30px;
height: 30px;
position: absolute;
top:6px;
left: 15px;
margin:0;
}
.phoneTxt input{
width: 100%;
background: #fcc8d9;
height: 40px;
border: 0px;
border-radius: 30px;
text-indent: 4em;
outline: none;
color:#fff;
font-size: 14px;
}
.phoneTxt input::-webkit-input-placeholder {
color: #fff;
}

.phonepas{
background: #fcc8d9;
border-radius: 20px;
}

.phonepas img{
width: 30px;
position: absolute;
margin: 0;
top: 6px;
left: 15px;

}

.phonepas input{
width: 100%;
height: 40px;
background: 0;
border: 0;
outline: none;
text-indent: 4em;
font-size: 14px;
color:#fff;
}
.phonepas input::-webkit-input-placeholder {
color: #fff;
}
.login_submit{
background: #ff9fb7;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
color:#fff;
border-radius: 30px;
outline: none;
}

//忘记密码
this.forgetPas = this.content.addChild();
this.forgetPas.setSizeMode('absolute','absolute')
                                 .setAbsoluteSize(100,44)
                                 .setAlign(0.9,0)
                                 .setMountPoint(1,0)
                                 .setPosition(0,280)

this.forgetPas.el = new DOMElement(this.forgetPas,{
      classes:['forgetPas'],
      content:'忘记密码?'
})

//立即注册
this.reg = this.content.addChild();
this.reg.setSizeMode('absolute','absolute')
         .setAbsoluteSize(200,40)
         .setPosition(0,420)
         .setAlign(0.5,0)
         .setMountPoint(0.5,0)
this.reg.el = new DOMElement(this.reg,{
      classes:['reg'],
      content:'还没有账号？<em>立即注册</em>'
})

.forgetPas{
font-size: 16px;
color: #606060;
text-align: right;
}
.reg {
font-size: 15px;
color: #606060;
text-align: center;
}

.reg em{
font-style: normal;
color: #82bbfd;
}

也许看到这里，小伙伴们会觉得代码比较繁琐，写起来会比较费劲。但是其实他们的结构大多数都是一样的，写多了也就快了。并且这些都可以作为组件，以后重复利用，越到后面就越轻松哦。