项目总结

Posted 2021-01-17 ycyweb

1.  自定义弹窗   

 弹窗窗口居中   

方案一：width:5rem;height:4rem;position:absolute;top:50%;marign-top:-(height/2); 在android4.4  Android6.0 ios8.4.1 低版本中未按预期结果显示，不兼容;

方案二：width:5rem;height:4rem;position:absolute;top:0;bottom:0;left:0; right:0;margin:auto; 可以兼容低版本

2.  IOS中input光标跑偏问题的解决方法

 把position:fixed改成absolute，然后jQuery阻止移动端遮罩层后页面滚动。

这样处理后，安卓手机正常显示，ios 弹窗出现后，弹窗还是可以上下移动。但是光标不跑偏了。

参考 https://www.jianshu.com/p/b222aade3f43

     https://blog.csdn.net/u011384023/article/details/79762787

3.在vivo Y23L Android4.4.4 flex布局不兼容

用float 或 display:inline-block

4. input 内容有改变做校验

$(‘.popinput1 input‘).on(‘input porpertychange‘,function(){})

5.移动端双层滚动

body里有一个 div ,内容少时滑动那部分，不阻塞；

内容多放不下时，产生滚动，当手指在那片区域时，body不滚动；在div外滚动时，正常滑动；

普通的给 div 限制高度，overflow:hidden; 当内层div 产生滚动时，body也滚动，用户体验不太好

上网查资料，最后决定用iScroll

方案一：

;$(function() {
   var isScrolled = false;
    var myScroll;
    function scrollInit() {
        return new IScroll(‘.yconbox‘, {
            mouseWheel: true,
            useTransition: false,
            click: true,
            bounce: true //false 取消回弹
        });
    }

      if ($(‘.ylist-con‘).find(‘li‘).length > 3) {
       // div 最多放下三条
        isScrolled = true;
        myScroll = scrollInit();
    }

    $(‘#share_1‘).on(‘click‘, function() {
     
    //  点击share_1 增加 li 的条数，如果未初始化iScroll,
    // 初始化；如果已经初始化，myScroll DOM 更新

    if (isScrolled) {
            myScroll.refresh();
        } else if ($(‘.ylist-con‘).find(‘li‘).length > 3) {
            myScroll = scrollInit();
        }

    })

})

方案二：

$(function() {

    var scroll_flag = false;
    var isLiChange = false;var myScroll;
    var timer = setInterval(function () {
        if ($(‘.ylist-con‘).find(‘li‘).length > 3 && !scroll_flag) {
            scroll_flag = true;
            myScroll = new IScroll(‘.yconbox‘, {
                mouseWheel: true,
                useTransition: false,
                click: true,
                bounce: true //flase取消回弹
            });
        }

        if (isLiChange && scroll_flag) {
            isLiChange = false;
            myScroll.refresh();
        }

    }, 100);

    $(‘#share_1‘).on(‘click‘, function () {
        
        $(‘.ylist-con ul‘).append(‘<li>‘ +
            ‘<img src="img/photo1.png" class="yavater">‘ +
            ‘<span class="text_max">雪飞绿叶</span>‘ +
            ‘<span class="fr mt-5">2012-09-13 22:23</span></li>‘);

        isLiChange=true;
    });
})

 下面是相关html,css 设置 （蓝色部分是动态生成的）

.yconbox{
    margin: 0 auto;
    width: 5.64rem;
    height:2.7rem;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

第二种方案用到定时器，对性能损耗比较大。故选择第一种方案。

iScroll 文档地址  http://caibaojian.com/iscroll-5/refresh.html

以上是简单的项目总结。