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

最新推荐文章于 2024-10-01 19:18:18 发布

前端布道人

最新推荐文章于 2024-10-01 19:18:18 发布

阅读量630

点赞数 1

分类专栏：前端杂货铺文章标签： css css3 javascript

本文链接：https://blog.csdn.net/BradenHan/article/details/130143992

版权

前端杂货铺专栏收录该内容

287 篇文章 1 订阅

订阅专栏

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

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

特效一：移动端适配

需求

移动端适配，采用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

安装和使用

安装

1<script src="https://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>  
2<script src="https://github.com/sdc-alibaba/SUI-Mobile/blob/dev/js/device.js"></script>

对应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<script src="path/to/hammer.js"></script>  
2<script src="path/to/swipeout.js"></script>

使用

实例化 在 <ul> 或 <ol> 标签上实例化 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<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

cdnjs

1<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>

RawGit

1<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>

unpkg

1<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>

浏览器支持

使用

html

1<div class="text-list-wrap">  
2  <ul class="text-list" id="orderInfo">  
3      <li>订单编号：21516696128828478</li>  
4      <li>下单时间：2018.01.23 16:28:48</li>  
5      <li>支付方式：支付宝-APP  </li>  
6  </ul>  
7  <span class="button copy-button">复制信息</span>  
8</div>

 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<script src="js/mobiscroll.javascript.min.js"></script>  
2<link href="css/mobiscroll.javascript.min.css" rel="stylesheet" type="text/css">

添加HTML标记

 1<div id="firstSelect" class="calendar-bar">  
 2    <span>  
 3        拿到器材  
 4        <input id="startDate" type="text" value="" readonly="" placeholder="请选择拿到日期">  
 5    </span>  
 6    <span id="numDay" class="num-day">共<em></em>天</span>  
 7    <span>  
 8        归还器材  
 9        <input id="endDate" type="text" value="" readonly="" placeholder="请选择归还日期">  
10     </span>  
11</div>  
12

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

未完待续。。。