移动端项目开发总结（一）
前阵子做租赁项目，风风火火的上线，趁现在还没忘，把用到的东西整理以下，算是对于这个项目的回顾吧。
特效一 ： 移动端适配
需求
移动端适配，采用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<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>
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<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
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});
未完待续 。。。
