移动端项目开发总结（一）

移动端项目开发总结（一）

前阵子做租赁项目，风风火火的上线，趁现在还没忘，把用到的东西整理以下，算是对于这个项目的回顾吧。

特效一 ： 移动端适配

需求

移动端适配，采用rem单位。结合JS和CSS共同来实现不同屏幕之间的适配。

rem 是相对于 html 元素的 font-size 的一个单位。如果 html 上定义了 font-size: 20px;，则无论在任何地方都是 1rem = 20px 这个大小不会受到父元素的影响。

我们统一使用rem对页面进行整体缩放。强烈建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。

我们在 iphone6 上使用 1rem = 20px 来换算。小于 375px 的设备上不做缩小处理，对 大于 375px 宽度的设备进行等比缩放。

解决方案

采用SUI Mobile框架中的模块。

SUI Mobile

• 官网地址： http://m.sui.taobao.org/

• github地址：https://github.com/sdc-alibaba/SUI-Mobile

安装和使用

安装

JS

1  
2  
 

对应CSS

 1// 375屏幕为 20px，以此为基础计算出每一种宽度的字体大小  
 2// 375以下不变，375以上等比放大  
 3html {  
 4  font-size: 20px;  
 5}  
 6@media only screen and (min-width: 400px) {  
 7  html {  
 8    font-size: 21.33333333px !important;  
 9  }  
10}  
11@media only screen and (min-width: 414px) {  
12  html {  
13    font-size: 22.08px !important;  
14  }  
15}  
16@media only screen and (min-width: 480px) {  
17  html {  
18    font-size: 25.6px !important;  
19  }  
20}

device.js 作用

• 修改：pixel-ratio的值，用来处理边框等问题。（如果不需要的话可以省掉）

   1@media only screen and (-webkit-min-device-pixel-ratio: 2) {  
   2  .list-block .item-inner:after {  
   3    -webkit-transform: scaleY(0.5);  
   4            transform: scaleY(0.5);  
   5  }  
   6}  
   7@media only screen and (-webkit-min-device-pixel-ratio: 3) {  
   8  .list-block .item-inner:after {  
   9    -webkit-transform: scaleY(0.33);  
  10            transform: scaleY(0.33);  
  11  }  
  12}
  

• 另外一个是判断设备的参数：提供了一些基本的设备侦测信息可供使用。

   1console.log($.device)  
   2// --------  
   3{  
   4  android: true  
   5  androidChrome: false  
   6  ios: false  
   7  ipad: false  
   8  iphone: false  
   9  isWeixin: false  
  10  os: "android"  
  11  osVersion: "4.4.1"  
  12  pixelRatio: 3  
  13  statusBar: false  
  14  webView: null  
  15}
  

使用sublime Text 的 ‘CSSREM’ 更能提高便写效率。

更多参考方案

• 移动端页面适配———多方案解析
  https://juejin.im/entry/59ca3c6df265da064f2024af

• 移动端适配方案(上)
  https://github.com/riskers/blog/issues/17

• 移动端布局适配方案
  http://blog.poetries.top/2017/11/05/mobile-layout/

• 移动端开发中，关于适配问题的一点总结(一)
  https://www.jianshu.com/p/3a5063028706

特效二 ： 拖动左滑动，显示删除按钮

需求

购物车部分新加个滑动显示删除的按钮，可以删除商品。参考微信滑动删除。

直接看下图：

解决方案

1. 使用插件 - swipeout

SwipeOut
https://github.com/ankane/swipeout

安装使用步骤

安装

SwipeOut 需要依赖Hammer.js，需要把下面两个JS引入到你的项目中：

Hammer.js and SwipeOut

hammerjs 官方地址： http://hammerjs.github.io/

调用展示

1  
2  
 

使用

实例化 在

或
标签上 实例化 SwipeOut。

1var list = document.getElementById("list");  
2new SwipeOut(list);  
 

如果有多个，重复调用

1function SwipeOutBind(){  
2    var cartList = document.getElementById("list"),  
3        cartUl = list.getElementsByTagName('ul');  
4    for(var i = 0; i < cartUl.length; i++){  
5        new SwipeOut(cartUl[i],{  
6            'btnText' : '删除'  
7        })  
8    }  
9}  
 

调用JavaScript

原生JS

1list.addEventListener("delete", function(evt) {  
2  // do something, like an ajax call to server  
3  // evt.target references the list item  
4});  
 

jQuery or Zepto

1$("#list li").on("delete", function(evt) {  
2  // ...  
3});  
 

定制

‘删除’按钮默认没有样式，你可以根据自己需要定制以下样式：

 1.swipe-out .delete-btn {  
 2  padding: 6px 8px;  
 3  border-radius: 6px;  
 4  border: solid 1px rgb(96,23,18);  
 5  background-image: linear-gradient(top, rgb(242,153,157), rgb(213,62,41));  
 6  background-image: -webkit-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));  
 7  background-image: -moz-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));  
 8  background-image: -o-linear-gradient(top, rgb(242,153,157), rgb(213,62,41));  
 9  text-shadow: 0em -0.1em rgb(51,51,51);  
10  color: #fff;  
11  font: bold 14px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;  
12}

‘删除’按钮的文案你可以自己修改：

1new SwipeOut(list, {  
2  btnText: "Remove"  
3}); // default: "Delete"  
 

其他解决方案

• js移动端向左滑动出现删除按钮
  http://www.cnblogs.com/libin-1/p/6431581.html

• 写一个js向左滑动删除 交互特效的插件——Html5 touchmove
  http://hovertree.com/h/bjaf/g7qrqcp5.htm

特效三 ： 点击复制文本

需求

订单部分，实现点击复制的功能。

直接看下图：



解决方案

使用clipboard.js插件

clipboard.js

• 官网地址：https://clipboardjs.com/

• github地址：https://github.com/zenorocha/clipboard.js/

安装

npm

npm install clipboard --save

CDN link

• jsDelivr

  1  
  
  

• cdnjs

  1  
  
  

• RawGit

  1  
  
  

• unpkg

  1  
  
  

浏览器支持



使用

html

1
  
2  
  
3      
订单编号：21516696128828478
  
4      
下单时间：2018.01.23 16:28:48
  
5      
支付方式：支付宝-APP  
  
6  
  
7  复制信息  
8
  
 

js

 1// 复制信息  
 2var clipboard = new Clipboard('.text-list-wrap .copy-button', {  
 3  target: function () {  
 4      return document.querySelector('#orderInfo');  
 5  }  
 6});  
 7clipboard.on('success', function (e) {  
 8  //console.log(e.text);  
 9  $.toast('复制成功');  
10});  
11clipboard.on('error', function (e) {  
12  //console.log(e.text);  
13});

特效三 ： 移动端日历选择联动插件

需求

需要实现点击选择开始时间和结束时间。并且需要实现某些日期不可选。

具体如下图：



实现方案
采用 mobiscroll插件实现

mobiscroll

• 官网地址：https://mobiscroll.com/

• 中文文档：https://www.mobiscroll.cn/app/mobiscroll/index

• gitHub地址：https://github.com/search?p=2&q=mobiscroll&type=Repositories

使用

加载必须文件

1  
2  
 

添加HTML标记

 1
  
 2      
 3        拿到器材  
 4          
 5      
 6    共天  
 7      
 8        归还器材  
 9          
10       
11
  
12

js

 1mobiscroll.range('#range', {{  
 2  startInput: '#startDate', // More info about startInput: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-startInput  
 3  endInput: '#endDate', // More info about endInput: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-endInput  
 4  theme: 'ios', // Specify theme like: theme: 'ios' or omit setting to use default  
 5  display: 'bottom',  
 6  lang: 'zh', // Specify language like: lang: 'pl' or omit setting to use default  
 7  dateFormat: 'yy-mm-dd',  
 8  fromText: '拿到日期',  
 9  toText:'归还日期',  
10  min: new Date(2015, 7, 14, 16, 57),  
11  max: new Date(2018, 7, 14, 16, 57),  
12  defaultValue: [ new Date(2015,9,13) ], // More info about defaultValue: https://docs.mobiscroll.com/3-0-0_beta5/range#!opt-defaultValue  
13  onSet: function () {  
14    ...  
15  }  
16});

未完待续 。。。