移动端布局+事件

针对移动端做点自我总结…

杂谈

文本超过一行用…代替

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

文本超过2行用…代替

width:200px;
word-break:break-all;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
background-color: burlywood;

animate.css动画库使用

animated 动画库使用方法在对应标签上加上对应类名就好了 
如：class=“animated  flash” 闪烁
默认执行一次，如果需要修改就修改css
 animation-duration: 3000ms;
 animation-direction: alternate;
 animation-iteration-count: infinite;

进入正题

布局

1，html和body必须同时设置宽高100%，下面的div的高才会有100%的高度
2，最外层标签元素也要设置100%宽高，不然直接给内部设置100%,页面会高出一截，导致会有上下晃动
3，来一波meta标签
    <!-- 显示苹果工具栏和菜单栏(默认)，改为no不显示 -->
    <meta content="yes" name="apple-mobile-web-app-capable">  
    <!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； -->  
    <meta content="yes" name="apple-touch-fullscreen">

    <!-- iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明） 
    注意：若值为“black-translucent”将会占据页面px位置，浮在页面上方
    （会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
    -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">   
    <!-- 告诉设备忽略将页面中的数字识别为电话号码。 -->
    <meta content="telephone=no" name="format-detection">


    <!-- 苹果手机safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上显示的图标 -->
    <link rel="apple-touch-icon" href="favicon.png">

    <!-- 浏览器网址左侧的图标 -->
    <link rel="Shortcut Icon" href="favicon.png" type="image/x-icon">

事件

在事件出发前记得组件默认拖拽事件
$('body').on('touchmove', function (event) {
    event.preventDefault();
});

JS原生事件

touchstart --- onmousedown
touchmove --- onmousemove
touchend --- onmouseup
需要用事件绑定的第二种形式触发

//如下是获取坐标点以便完成拖拽
$('.drag').on('touchstart',function(e){
    console.log(e.originalEvent.touches[0])
})

var div = document.querySelector('.drag');
div.addEventListener("touchstart", function(e) {
      console.log(e.touches[0]); //方式一
       console.log(e.targetTouches[0]);//方式二
 },false)

touch.js插件

touch我这里有三个版本，有轻到重，功能由简单到复杂
touch1.js, touch2.js, touch3.js

touch1.js

依赖文件：不依赖任何文件
完成功能：上下左右滑动和点击
使用：document.querySelector(‘div’).touch({
tap:function(ev){
//var e = ev || window.event; 不需要了
console.log(‘哎呀，被点击了’,e)
},
swipeUp:function(ev){
console.log(‘哎呀，执行了上滑’,e)
},
swipeDown:function(){
console.log(‘哎呀，执行了下滑’)
},
swipeLeft:function(){
console.log(‘哎呀，执行了左滑’)
},
swipeRight:function(){
console.log(‘哎呀，执行了右滑’)
},
})
JQ使用：如果是用jq就—get()是获取DOM元素，eq()是获取jq对象
$(‘div’).get(0).touch({
tap:function(){
console.log(‘哎呀，被点击了’,e)
},
…
})

touch2.js

依赖文件：依赖jquery，必须在jq之后引入
完成功能：上下左右滑动，单击，双击(doubleTap)，长按(longTap)
使用：

//必须用驼峰标示
$(‘.begin’).doubleTap(function(){
alert(123)
})

touch3.js

依赖文件：不依赖任何文件 //必须全部小写
完成功能：滑动，上下左右滑动，单击，双击(doubletap)，长按(hold)，旋转，缩放
使用：
1，对手势事件库进行全局配置。
touch.config({ //可以不配置，就用默认的就好
tap: true, //tap类事件开关, 默认为true
doubleTap: true, //doubleTap事件开关，默认为true
hold: true, //hold事件开关, 默认为true
holdTime: 650, //hold时间长度
swipe: true, //swipe事件开关
swipeTime: 300, //触发swipe事件的最大时长
swipeMinDistance: 18, //swipe移动最小距离
swipeFactor: 5, //加速因子, 值越大变化速率越快
drag: true, //drag事件开关
pinch: true, //pinch类事件开关
})

2，事件绑定
touch.on( element, types, callback );
//多个手势同个效果，用空格隔开即可
touch.on('#target', 'hold tap doubletap', function(ev){  } 

旋转：
var div1 = document.querySelector('.d');
var angel = 0;//初始角度
touch.on(".d","touchstart",function(e){
    e.startRotate();//开启旋转
    e.preventDefault();//阻止默认事件
})

touch.on(".d","rotate",function(e){
    console.log(e)
    var deg = angel + e.rotation;//计算当前旋转角度
    div1.innerHTML = deg;
    if(e.fingerStatus == "end"){//判断手指的状态，如果手势已停止
        angel = deg;
    }
    div1.style.transform = "rotate("+deg+"deg)";
})

缩放：
touch.on(".d",'pinch',function(e){
    alert(e.scale)  //这是缩放倍数
})    

3，解除某元素上的事件绑定
touch.off( element, types, callback )    

4，触发事件
touch.trigger(element, type);

关于touch3.js，更多详情请参考这位的文章：touch3.js

2016-12-06