就段时光以做的东西,是负邮人论坛APP的注册页。这个注册页是内嵌的网页,因为打算安卓和IOS平台以以。因此实际就是以做活动端的web开发了。
在即时过程遭到相见了不少诙谐的事物。

DEMO的github地址在这里

内容提要:

  • meta标签
  • Vuejs的大概实战
  • CSS移动端全屏背景
  • CSS移动端动画初探

meta标签

眼看点以及在PC端写前端有着非常怪之区别,移动端的meta标签简直多。我哪怕说说自所用到之签。

<!-- 1、如果支持Google Chrome Frame:GCF,则使用GCF渲染;2、如果系统安装ie8或以上版本,则使用最高版本ie渲染;3、否则,这个设定可以忽略。 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- 对视窗缩放等级进行限制,使其适应移动端屏幕大小 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 当把这个网页添加到主屏幕时的标题(仅限IOS) -->
<meta name="apple-mobile-web-app-title" content="北邮人论坛注册">
<!-- 添加到主屏幕后全屏显示 -->
<meta name="apple-touch-fullscreen" content="yes" />

越是亚只meta标签,是倒端适配非常重大的等同句话。

整布局

圆的布局大致是4-5页横向布局。第一页是为此来填写注册信息的。后面的几页是故来选择关注的版面的。

挂号信息页

2018正版葡京赌侠诗 1

关注版面页

2018正版葡京赌侠诗 2

2018正版葡京赌侠诗 3

2018正版葡京赌侠诗 4

完架构

前者采用的架大致是如此:

  • 滑切换页面的效益来swiper.js
  • 页面内容之渲染采用Vue.js
  • 页面布局及体采用纯css,部分效果下css3
  • ajax部分以vue-resource

后端支撑的框架来php的laravel,当然,这不是本文的重要,仅提及一下。

是的这次的付出中,已经看不到jquery的身形了——这也是前者后发展后底结果——慢慢地离jquery的指。不过jquery给前端带来的更改以及升华是不管人能够取代的。

swiper.js的应用

引入swiper.js来进行页面的切换效果纯粹是为这次支付的周期要求比紧缺,要考虑功能及兼容性兼备的情形下,我就算偷懒找了一个动画库。

唯独此动画库的职能自己要么算比较满意的。而圆来说使用与否一定好。尤其是,swiper.js是可以不依赖jquery的。

运起来为较方便。我简单说说之所以法。

首先得以页面顶部的head标签里进入swiperjs的css文件:

<link rel="stylesheet" href="css/swiper.min.css')">

接下来于页面底部可以引入和写下相应的js:

<script src="{{ asset('js/swiper.min.js') }}"></script>
  <!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationType: 'progress',
    noSwipingClass: 'swiper-no-swiping',
    allowSwipeToNext: true,
    allowSwipeToPrev: true,
  }); 
</script>

解释一下,创建一个swiper的目标,然后随即对象的容器是class叫做swiper-container的一个html元素。对那个的配备是:

  • pagination: ‘.swiper-pagination’, 显示页码
  • paginationType: ‘progress’,
    页码显示格式为快长长的,可以瞻仰顶部蓝白色之快长条
  • noSwipingClass: ‘swiper-no-swiping’,
    不同意开展触摸滑动的素的class名称
  • allowSwipeToNext: true, 允许为后滑动
  • allowSwipeToPrev: true, 允许向前滑行

对应的HTML代码可以如下:

<!-- swiper生效的容器 -->
<div class="swiper-contanier">
  <div class="swiper-wrapper">
    <!-- 具体滑动的页面 -->
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>
</div>
<!-- 进度条 -->
<div class="swiper-pagination"></div>

微页面是休能够一直吃用户通过触摸来前后滑动的,而须经过点击按钮触发。比如第一页注册页,这个页面就必须填写了信息然后点击下一样步进行验证后然后才堪滑动到末端的情节。所以要拿之页面所于的class里长swiper-no-swiping这个class就可以兑现无法触摸滑动切换页面了。

然后我们好透过swiper.slideNext(bool,time)这个点子来拓展手动控制朝后翻页的动作与控制动画的时长。这个情会当vue里说到。

Vue.js的概括实战

鉴于本次的付出只是当原本的失利邮人开放平台的路之基本功及投入一个高效注册之效能,所以Vue.js的引入并无是为拿全项目重构,而单单是以尝试一下脱jquery的状况下对开发以来不同之心得是呀,能模拟到什么。

至于Vue.js的用法、特性什么的不是本文的显要,题外话就不说了。说说此次实现思路。因为自己的Vuejs实际上为只是是算入门级别,只能说会见为此而还未曾到能驾驭的档次。

第一整个页面包在class叫做swiper-contanier的素中。因为是因素包括了滑动所欲的享有东西,我们实在可以大概的管其当是一个SPA(Single
Page
Application),用一个Vue的实例就得接管整个页面了(这么说是不担当之,因为实在Vue是组件化的思辨)。

先行创造一个核心的Vue的示范,并拿那个与swiper-container绑定起来:

var vm = new Vue({
  el: ".swiper-contanier", // 将这个实例与html元素绑定起来
  data: {}, // 所需要变动、关注的数据,也是vue的核心
  ready: function(){}, // vue提供的钩子,用于在vue渲染视图完成后立即触发
  methods: {} // 方法,用于操作、更新、改变数据而改变视图
})

注册页实现

上面所说,我们的页面是构建以一个Vue的实例上的。因此不同门类的一定量栽页面怎么用一个实例来接管呢?在这边我之兑现方式是用半接近数据来分别代表。

咱们解析一下注册页:

2018正版葡京赌侠诗 5

骨子里注册页的中间部分凡是再的素,他们都是input标签+显示文字标签(对,尤其令人瞩目这里并无是故placeholder实现的)。效果:

2018正版葡京赌侠诗 6

所以就中的部分其实可以视作是一个列表,可以就此Vue的v-for来渲染。列表里所不同的才是显得的亲笔不同以及input框的类不同(有text类型的,有password类型的),所以用多少绑定的方式我们可以此页面的多少格式安排如下:

data: {
  main: [
    {"name":"username","info":"用户名(以英文开头+英文数字)","type":"text"},
    {"name":"passwd","info":"设置密码","type":"password"},
    {"name":"passwd_confirm","info":"在输入一遍密码","type":"password"},
    {"name":"gwno","info":"校园网账户(默认是学号)","type":"text"},
    {"name":"gwpwd","info":"校园网密码(默认是身份证后六位)","type":"password"},
  ],
}

再就是我们创建一个有益与前端视图进行双向绑定的数量对象userInfo:

data: {
  main: [...],
  userInfo: {
    username: "",
    passwd: "",
    passwd_confirm: "",
    gwno: "",
    gwpwd: ""
  }
}

只要于前者的言辞我们就是可以为此此数量来进展视图渲染:

<ul class="user-info">
  <li v-for="item in main" style="position: relative;">
    <!-- input输入框 -->
    <!-- 此处用了v-model将数据和视图进行了双向绑定 -->
    <input class="effect" type="{{item.type}}" v-model="userInfo[item.name]">
    <!-- 提示信息 -->
    <label>
      {{item.info}}
    </label>
    <!-- input框的底下的线条 -->

  </li> 
</ul>

<a href="#"><button>下一步</button></a>

于是乎一个输入的列表就生爱做出来了。然后既是表单,就需要证明。而此做的认证实际上有如此几点:

  • 用户称是否合法/重复?
  • 区区赖输入的密码是否相同?
  • 校园网账户的密码是否是?

内部只有亚碰零星蹩脚密码输入是否一律可以为此前端直接判,而首先、三接触还是用经ajax的道为后台发送验证请求的。为了能够体现和辨别错误也,我们以main下的每个条例里加入了一个error属性,并确定如下三种状态:

  • true,代表有左,提示错误
  • false,代表对,提示是
  • normal,代表默认,显示默认值

遂我们好以method下写一些道来进行判断。

checkUserId: function(msg){
  if (msg !== ""){
    this.$http.post('url'+msg,function(data){
      if (data.success){
        this.main[0].error = false;
      } else{
        this.main[0].error = true;
      }
    })
  } else{
      this.main[0].error = "normal";
  }
},
checkUserPwd: function(){
    if (this.userInfo.passwd_confirm !== ""){
        this.userInfo.passwd == this.userInfo.passwd_confirm && this.userInfo.passwd_confirm != "" ? this.main[2].error = false : this.main[2].error = true;
    }
},

当然这只是一个引入的效益,我们重聚一下:

check: function(msg,i){
  var index = i;
  this.userInfo[msg] != "" ? this.main[index].effect = true : this.main[index].effect = false;
  switch (msg){
    case "username":
      this.checkUserId(this.userInfo[msg]);                                      
      break;
    case "passwd":                                                                 
      this.userInfo.passwd !== "" ? this.main[1].error = false : this.main[1].error = "normal";       
      this.checkUserPwd();                                                       
      break;                                                                     
    case "passwd_confirm":
      this.checkUserPwd();                                                       
      break;
    case "gwno":
      this.userInfo.gwno !== "" ? this.main[3].error = false : this.main[3].error = "normal";     
      break;
    case "gwpwd":
      this.userInfo.gwno !== "" ? this.main[4].error = false : this.main[4].error = "normal";     
      break; 
  }     
}

诸如此类经过一个check的method我们虽得将不折不扣表单的说明的不二法门兼收并蓄进来了。(此处对于校园网账号的验证会放到提交表单的函数中)。为了能够以视图中反映是、错误、正常的异形态,我们需要对前者的部分构造进行局部改。我们用给main下之每个条例在错误信息,也就算errorInfo。

用至今整个main的构造是这么:

main: [
  {"name":"","info":"","type":"","error":"","errorInfo":""},
  ...
]

然后我们用投入提交认证的片段:

submitReg: function(){
  var flag = 0;
  // 用于判断表单是否都是正确的
  this.main.map(function(obj){
    obj.error == false ? flag += 1 : flag +=0;
  })
  if (flag == 5){
    this.$http.post('url',this.userInfo)
    .then(function(res){
      if (res.success){
        swiper.slideNext(false,300); // 验证正确就可以进入下一页
      } else{
        this.main[4].error = true;
      }
    })
  }
},

以视图部分修改如下:

<ul class="user-info">
  <li v-for="item in main" style="position: relative;">
    <!-- 绑定blur事件 -->
    <input @blur="check(item.name,$index)" class="effect" type="{{item.type}}" v-model="userInfo[item.name]">
    <!-- 根据error类型切换不同的标签显示 -->
    <label>
      <!-- 此处用到了v-show的方法 -->
      {{item.info}}
      {{item.errorInfo}}
      {{item.info}}√
    </label>

  </li>
</ul>
<!-- 点击下一步的同时提交表单信息 -->
<a href="#"><button @click="submitReg">下一步</button></a>

迄今为止,整个注册页的布局以及功能性的局部还已经举行截止了。不过就无非是同等片比较简单的片段,我们因而到了vuejs的的v-for进行列表渲染,用到了v-model进行多少的双向绑定,用到了method进行有多少的拍卖,用到了v-show进行规范显得,一个骨干的页面下我们曾能够尝这样多vue的特点了。而比叫jquery的dom操作,我道vue在此最好的地方在于,表单的付出很有益。由于双向绑定了数,只需要后台把数据格式规定好于本人,我本后端的数据结构整理一下自我前端的数据结构然后便可以一直付出给后端了。而且节省了成百上千dom操作的地方。

可是除了vue的有,我还惦记吧说个别独东西,跟css有关:

  • 全屏背景
  • 输入框文字提升效能,并波及到活动端动画作用的拍卖

全屏背景
不但是简约的background-size:
cover那么简单了,还用展开小处理。先说说自己希望实现之职能吧。我盼望的效能是漫天背景能够填充整个页面,并且以页面元素上下滚动的事态下,背景固定而不趁早元素滚动。

嵌入往常自我或会见这样写:

body,html{
  height: 100%;
}

body{
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

可是这样的话在移动端会油然而生比较严重的后果,那就是是设页面元素的惊人过一切页面后,滚动页面元素的当儿,背景为会见随之而动。而且背景会为顶起来。这不是自己所期望之。

此地用到一个多少技巧,用上:before的道。

body:before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(bg.png) center 0 no-repeat;
  background-size: cover;
}

夫用上before的伪元素的艺术是一个挺有奇效的粗技巧。大家不妨可以尝试。这样的话在活动端也能完善兑现背景固定而且显示全屏。

走端动画简单初探
在做PC端的web的卡通片效果的时刻,由于PC端的性足够,所以当描绘一些力量的当儿屡次没设想到性的题目。这次以支付的时即便碰到了动画片效果落实达标不略之题目。大家先来探就点儿个卡通的可比:上面一个动画片与下一个动画片:

第一个:
https://codepen.io/molunerfinn/pen/zBGrxx

第二个:
https://codepen.io/molunerfinn/pen/oLXjKz

会发觉这简单个东西的效益相差大坏。实际上,二者实现之末梢效果是相同的,都是吃小球本平条口型路线活动。但是为什么显示上来说,第一只这样流畅,而第二只出举世瞩目卡顿呢?

这里涉及到多物,不光光是重绘(repaint),还有软硬件性能方面的问题。感兴趣之说话可参见这些章:

  • Web动画性能指南
  • 高性能CSS3动画
  • CSS动画的性优化

当走端上的意义使无优化的话,实际上大致就是是第二种植的机能——让人看起有所卡顿。简单的话,在移动端,有些功力是由于浏览器来渲染之——那么这些功能使比较复杂,而走端的浏览器性能又休太足够的情下,效果就于卡顿。有些功力好由GPU来渲染,那么这些效应渲染起来就是相对来说比较流利。而我辈尚可人吗触发GPU硬件渲染,通过
transform的translate3d属性就可知促成硬件渲染从而俗称硬件加速。

推选个大概例子。如果被一个元素于(0,0)->(100px,0),正常思路是left:
0->left:
100px,然后还就此transition属性进行接。不过这样的话在走端上效果就是颇振奋人心,因为涉嫌到性问题。但是如果我们所以另外一种办法:
transform:
translate3d(100px,0,0)的话,就可以让这动画效果由GPU去渲染,那么这样的话,在走端的效果也是全然可领之珠圆玉润。

实际,能够触发GPU渲染的动作有opacity,transform,transition,animation等等。但是像top,left,color,size等性能的变型则免会见触发GPU渲染。

正文中讲述的实例,是当问题集中到input框的时光,文本上换并还发出颜色变化。本来想实现之凡文件大小还有变化。但是出于地方说之景况2018正版葡京赌侠诗,涉及到size变化的时候,效果就是会大打折扣。无奈之下我不得不砍掉这个力量了。而落实公文及转换实际上就是是使了transform的translate3d的方式,将该于上动,并配合transition进行了瞬间连缀处理而已。

切实的CSS实现大致如下:

input:focus ~ label,.trans {                                                                 
  color: #fff;                                                                                 
  transition: 0.3s;                                                                            
  -webkit-transform: translate3d(0, -20px, 0);                                                 
  -moz-transform: translate3d(0, -20px, 0);                                                    
  -ms-transform: translate3d(0, -20px, 0);                                                     
  transform: translate3d(0, -20px, 0);                                                         
}

实际也未为难休是者?

关怀版面页的兑现

实则由注册页的兑现着曾经足以瞥见关注版面页实现之艺术了。实际上关注版面页不过为是列表的渲染,在数据里定义好相应的性质就实行了。然后据此一个picked的习性来探视是不是为入选即可。最后就登记之早晚,将有着入选的列表组装成相应的数组提交至后台就行了。因为登记页里这些方式已说过了,所以即使不再赘言了。

总结

简言之总结一下,这次走端的支付被上到之东西。

  • Vuejs的简要利用,从DOM操作->数据绑定
  • 全屏背景的落实
  • 顺理成章动画效果的兑现

事实上,兼容性方面还有众多的事物需要诉说,不过限制为篇幅和本文的重点内容连无是当纠结移动端的兼容性的之所以并无在兼容性方面进行记录。

以排版上自己要么不曾就此上于盛行的flex,对于Vue还没采用组件化开发的思绪。这些都是要改善的部分。不过这次的出进程被通过美工的指导,将自己前面写页面的当儿注意勿交之居多细节部分,比如线条尺寸,元素间隔,颜色搭配等东西让据了出,这些事物还不是简简单单就兑现之。总之,有时间来说,我想我得以将筹划方的学问融入到自己的前端开发中,想必会叫自家之创作更地合审美和用户的感受吧~

DEMO的github地址在这里

章作者: Molunerfinn
文章链接: https://molunerfinn.com/vuejs-1/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0
许可商榷。转载请注明来源 MARKSZのBlog!

2018正版葡京赌侠诗 7

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图