second

最新推荐文章于 2023-09-05 17:00:37 发布

前端黑

最新推荐文章于 2023-09-05 17:00:37 发布

阅读量311

点赞数

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_38964133/article/details/89294217

版权

移动端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

####复习

在使用了box-sizing之后加padding比较多加margin可能会造成内容的溢出

设置margin的大小时不算进和自宽度的 padding是由算进去的所以使用 padding

移动端搜索

移动端获取页面的滚动距离使用

var scrollTop = document.body.scrollTop; 
没有其他的兼容性

引入js文件使用

<script src="js/index.js"></script>

思考如何解决 offsetHeight无法获取问题

移动端触摸事件

解释touch:
1. touch是移动端的触摸事件 而且是一组事件
2. touchstart   当手指触摸屏幕的时候触发
3. touchmove    当手指在屏幕来回的滑动时候触发
4. touchend     当手指离开屏幕的时候触发
5. touchcancel  当被迫终止滑动的时候触发（来电，弹消息）
6. 利用touch相关事件实现移动端常见滑动效果和移动端常见的手势事件

绑定事件：

使用 box.addEventListener(‘touchstart’, function (){

})

事件对象

名字 touchlist 触摸点(一个手指触摸就是一个触摸点，两个手指就有两个，也就是和屏幕的接触点个数)的集合

changedTouches 改变后的触摸点集合

targetTouches 当前触摸点集合

touches 页面上所有触摸点的集合

触摸点集合在每个事件触发的时候会不会记录触发

changesTouches 每个事件都会记录

targetTouches touches 在离开屏幕的时候不会记录触摸点

分析滑动实现的原理

就是让触摸的元素随着手指的滑动位置的改变

位置的改变

需要当前手指的坐标

在每个触摸点中会记录当前触摸点的坐标 e.touches[0] 第一个触摸点

 clientX clientY      基于浏览器窗口（视口）
 pageX   pageY        基于页面（视口）
 screenX screenY      基于屏幕
使用任何一种都可以

轮播图需求分析

/*1. 自动轮播图且无缝   定时器，过渡*/
/*2. 点要随着图片的轮播改变  根据索引切换*/
/*3. 滑动效果  利用touch事件完成*/
/*4. 滑动结束的时候    如果滑动的距离不超过屏幕的1/3  吸附回去   过渡*/
/*5. 滑动结束的时候    如果滑动的距离超过屏幕的1/3  切换（上一张，下一张）根据滑动的方向，过渡*/

自动轮播与无缝轮播与优化

轮播图点的设置

伪数组不能直接调用 forEach方法

伪数组就是指比如获取dom元素多个li的集合就是伪数组

滑动效果

解决一个bug 当点一下不滑动轮播图不转

解决了在重启定时器的代码需要放在判断之外

移动端滑动的手势

手势事件 swipe swipeLeft swipeRight swipeUp swipeDown

/*1. 理解移动端的手势事件*/
/*2. swipe swipeLeft  swipeRight swipeUp swipeDown */

tap（轻触）事件

轻击轻触响应速度块

移动的click事件反应慢为了区分滑动和点击会延迟300ms

使用tab事件解决click事件反应慢

是通过touch原生事件衍生过来的了解其原理

在一定时间内没有滑动就是点击

if ((Date.now() - startTime) < 150 && !isMove) {
     callback && callback.call(this, e);
   }

使用fastclick插件解决响应慢

4.2 使用一个叫：fastclick.js 提供移动端click响应速度的
4.2.1 下载：https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js

<script src="../js/fastclick.min.js"></script>
<script>
    /*当页面的dom元素加载完成*/
    document.addEventListener('DOMContentLoaded', function() {
        /*初始化方法*/
        FastClick.attach(document.body);
    }, false);
    /*正常使用click事件就可以了*/
</script>

引入上面的文件后就可以正常的使用click了

倒计时

有浮动需要给父元素清除浮动不然会出现闪动意想不到的事情

顶部通栏

裁剪背景

 /*让背景图片从内容区域开始平铺*/
    background-origin: content-box;
    /*没有做背景裁剪 背景图默认就是从边框显示*/
    /*默认的就是
    border-box  边框以外被裁剪掉
    padding-box 内边距以外被裁剪掉
    content-box 内容以外被裁剪掉
    */
    background-clip: content-box;

因为这个案例的下拉可以无限的长所以需要高度也是100%

两栏自适应

左栏浮动右栏超出的部分 overflow： hidden

overflow： hidden在这里的作用
/*让这个元素绝对绝缘  bfc*/
/*不让其他浮动元素影响自己*/
/*不让自己的浮动去影响别的元素*/

在案例两栏自适应里面有

iscroll的使用

文件里有具体使用文档

浮动的时候记住调换一个div的位置

第一个div占满位置第二个div就会在第一个div后面排列下去

两栏自适应浮动元素优先写在前面

text-right文本向右对齐

text-left文本向左对齐

less使用安装

安装

npm install -g less

lessc -v 查看版本

学习网址

1.1.2学习less
[官网](http://lesscss.org/)
    [中文网](http://lesscss.cn/)  http://www.1024i.com/demo/less/
Webstrom 插件
Lessc less.less less.css  编译less文件成css