移动端开发问题总结2

最新推荐文章于 2023-06-14 06:36:59 发布

zhangr16xyz

最新推荐文章于 2023-06-14 06:36:59 发布

阅读量320

点赞数 1

分类专栏：移动端适配 js jquery

本文链接：https://blog.csdn.net/weixin_36079296/article/details/71484301

版权

移动端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

4 篇文章 1 订阅

订阅专栏

jquery

3 篇文章 0 订阅

订阅专栏

1.composition事件:

解决input下汉字输入法重复检测问题
compositionstart：当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.
compositionend：当浏览器是直接的文字输入时, compositionend会以同步模式触发.
兼容ie 9+.

也就是给input事件触发截流：

var node = $('input');
var flag = false;
node.on('compositionstart', function(){
    flag = true;
})
node.on('compositionend', function(){
    flag = false;
})
node.on('input', function(){
    if(!flag ){
        //Todo.....
    };
});

2.常用JQ方法：

1.回顶部：

$('body').animate({
            scrollTop: '0'
        }, 500);

2.多元素绑定生成数据：

$('.div1,.div2,.div3').on('click', '.div4', function() {
        fn()
    });

3.空处理：

$.trim(keyword) == ''

4.页面间跳转

页面1>>a标签传source>>数据缓存>>页面2>>读url判断>>回退跳回页面1>>读数据清缓存

5.页面尽量多HTML，C3，尽量显示隐藏; 为了避免iphone下失效，浏览器工具菜单栏影响体验，以下是解决办法：

<style type="text/css">
        body {
            margin: 0 auto;
            padding: 0;
            width: 100%;            
            position: fixed;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
            overflow: scroll;
        }
        .box{
            width: 100%;
            overflow-y: scroll;
            float: left;
            overflow-x: hidden;         
            background: gainsboro;
            height: 89vh;

        }
        .pox{
            width: 100px;
            height: 20vh;
            border: 1px solid red;
        }
    </style>
    <body>
        <div class="box">
            <div class="pox"></div>
            <div class="pox"></div>
            <div class="pox"></div>
            <div class="pox"></div>
            <div class="pox"></div>
            <div class="pox"></div>
            <div class="pox"></div>
        </div>

    </body>

zhangr16xyz

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端开发问题总结2

1.composition事件:解决input下汉字输入法重复检测问题compositionstart：当浏览器有非直接的文字输入时, compositionstart事件会以同步模式触发.compositionend：当浏览器是直接的文字输入时, compositionend会以同步模式触发.兼容ie 9+. 也就是给input事件触发截流：var node = $('input')
复制链接

扫一扫