BOM移动端

最新推荐文章于 2024-08-08 10:33:11 发布

FG.

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量159

点赞数 2

分类专栏： Web APIs 文章标签： html5 html css3

本文链接：https://blog.csdn.net/weixin_54418006/article/details/122511379

版权

Web APIs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.触屏事件概述

移动端浏览器兼容性较好，不需要考虑以前的JS的兼容性问题。
touch 对象代表一个触摸点，触摸点可能就是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件：

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

2. 触摸事件对象（TouchEvent）

TouchEvent是一类描述于手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少等。
触摸事件对象三个常见对象列表：

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

3. 移动端拖动元素

原理：手指滚动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离
手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置
需要使用 targetTouches[0] 里面的 pageX 和 pageY获取当前手指的坐标值
注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();


<body>
    <div></div>
    <script>
        //1.获取元素
        var div = document.querySelector('div');
        var startX = 0; //获取手指初始坐标
        var startY = 0;
        var x = 0; //获得盒子原来的位置
        var y = 0;
        div.addEventListener('touchstart', function (e) {
            //获取手指初始坐标
            startX = e.targetTouches[0].pageX;
            startY = e.targetTouches[0].pageY;
            x = this.offsetLeft;
            y = this.offsetTop;
        });
        div.addEventListener('touchmove', function (e) {
            //计算手指的移动距离，手指移动之后的坐标减去手指初始的坐标
            var moveX = e.targetTouches[0].pageX - startX;
            var moveY = e.targetTouches[0].pageY - startY;
            //移动我们的盒子 盒子原来的位置 + 手指移动的距离
            this.style.left = x + moveX + 'px';
            this.style.top = y + moveY + 'px';
            e.preventDefault(); //阻止屏幕滚动的默认行为
        });
    </script>
</body>

在这里插入图片描述
案例：返回顶部

在这里插入代码片

4. click延时解决方案

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放（double tap to zoom）页面。
解决方案：

禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟。

<meta name="viewport" content="user-scalable="no">

利用touch事件自己封装这个事件解决

原理：

当我们手指触摸屏幕，记录当前触摸时间
当我们手指离开屏幕，用离开的时间减去触摸时间
如果时间小于150ms，并且没有滑动屏幕，那么我们就定义为点击

//封装tap,解决click 300ms延时
function tap(obj, callback) {
         var isMove = false;
         var startTime = 0; //记录触摸时候的时间变量
         obj.addEventListener('touchstart', function (e) {
             startТime = Date.now(); //记录触摸时间
         });
         obj.addEventListener('touchmove', function (e) {
             isMove = true; //看看是否有滑动，有滑动算拖拽，不算点击
         });
         obj.addEventListener('touchend', function (e) {
             if (!isMove && (Date.now() - startTime) < 150) {
                 //如果手指触摸和离开时间小于150ms算点击
                  callback && cal1back();  //执行回调函数 
             }
             isMove = false; //取反 重置
             startTime = 0;
         });
}
//调用
tap(div, function () { 执行代码 });

使用插件。 fastclick 插件解决300ms 延迟。
GitHub官网地址

5. swiper 插件的使用

中文官网地址

引入插件相关文件
按照规定语法使用

使用方法

6. 其他插件

superslide：官网
iscroll：官网

7. bootstrap 开发框架

官网下载bootstrap3中文文档，另外的jquery.min.js文件是在这里
引入js和css文件，再自己修改一下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="bootstrap-3.4.1-dist/js/jquery.min.js"></script>
    <script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <style>
        .focus {
            width: 800px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }

        .carousel,
        .carousel img {
            width: 100%;
            height: 300px !important;
        }
    </style>
</head>

<body>
    <div class="focus">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.308b948480cb77b612e42d5462ae073c?rik=xIt3zfZiBE4d8Q&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f40006%2f9851.jpg_wh1200.jpg&ehk=%2fcuuPP24VqiPsN83x3%2bgYYOoTx7xTaTmSN7gvg5OHec%3d&risl=&pid=ImgRaw&r=0"
                        alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="https://picb3.photophoto.cn/31/190/31190343_1.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="https://tse1-mm.cn.bing.net/th/id/R-C.8004a91bd57bae652486b0814cd53425?rik=MoLNDKJjffipTg&riu=http%3a%2f%2fphoto.16pic.com%2f00%2f07%2f70%2f16pic_770760_b.jpg&ehk=6wfHhbZ35XVCspzqNhgusb19IHAarG3Ao4B8YRJYKPo%3d&risl=&pid=ImgRaw&r=0"
                        alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <script>

    </script>
</body>

</html>

在这里插入图片描述

FG.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM移动端

1.触屏事件概述移动端浏览器兼容性较好，不需要考虑以前的JS的兼容性问题。touch 对象代表一个触摸点，触摸点可能就是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件：触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...
复制链接

扫一扫