专注于
IT技术和业内交流

cordova+famous实战篇(2)——登录页面

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

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

准备工作
在src文件夹下面新建login.js.

编写代码
1.引入Node和微DOM,并且让它继承Node的方法

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;

2.编写头部代码

    this.head = this.addChild();//新建页面子元素
    this.head.setSizeMode('absolute','absolute')//声明定位方式
                     .setAbsoluteSize(40,40)//声明元素大小

    //创建节点
    this.head.el = new DOMElement(this.head,{
        classes:['login_head']//节点class名称
    });

3.加入返回图标和编写CSS代码(css和img都在www文件目录下)

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%;
}

到这里,头部就编写完成,让我们先来看看效果。打开DOS窗口,和上一篇一样,输入以下命令,就可以看到效果啦。

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

cordova+famous实战
4.加入logo

    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图片
    })

5.加入登录账号输入框

    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="手机号码"/>'//加入输入框标签
    })  

6.同样的原理,加入登录密码输入框和登录按钮


//登录密码输入框 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:'登录' })

7.输入框和登录按钮CSS

.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;
}

到这里,雏形就差不多了,我们再来看看效果!
cordova+famous实战

8.接下来,就是两个链接(找回密码和注册)。都是运用同样的属性,没有什么特别的技巧,这里就直接上代码:

    //忘记密码
    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>'
    })

9.下面是这两个链接的CSS

.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;
}

再来看看运行效果,大功告成!
cordova+famous实战

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

未经允许,不得转载本站任何文章:代码山 » cordova+famous实战篇(2)——登录页面

分享到:更多 ()

专注品牌化高端网站建设

商务服务联系我们