mcake活动维护常见问题记录【wap端】 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★

一、wap端弹窗

.Dialogbg-Select{
  background-color: #000; height: 100%; left: 0; opacity: 0.85;
  position: fixed; top: 0; width: 100%; z-index: 200; display: none;
}

.Dialog-Select{
  background: #fff none repeat scroll 0 0;
  box-shadow: 0 0 0 #999;
  font-size:px2rem(14);
  width:px2rem(600);
  height:px2rem(660);
  margin-top: px2rem(-330);
  margin-left: px2rem(-300);
  left: 50%;
  padding: 0;
  position: fixed;
  top: 50%;
  z-index: 99999; display: none; border-radius:px2rem(20);
}

<div class="Dialogbg-Select" ontouchmove="return false;"></div>   /*禁止弹窗滑动滚动*/
<div class="Dialog-Select" ontouchmove="return false;">
    <div class="s-closes"></div>
    <div class="Select" ontouchmove="return false;"> <p></p> </div>
</div>

==================================================================

二、wap端兼容小屏的做法

@media screen and (max-width: 320px) {
  .sel-li{ top: px2rem(-10) !important; }
  i{top:px2rem(3) !important; }
}

================================================================

三、px转rem。

1.通过sass自动编译

<script src="http://edm.mcake.com/weifengwang/common/flexible.js"></script>

@function px2rem($n) {
  @return ($n * 10 / 750) * 1rem;
}

=================================================================

2.手动转rem  实际像素 * 10 / 750    = 需要的rem 

也可以简单理解为：实际像素/75 = 需要的rem

比如：300px-->4rem

50px-->.666rem

3.js函数方式

 /*px转成rem的方法*/
    function px2rem(d) {
        var val = parseFloat(d) * 10 / 750;
        if (typeof d === 'string' && d.match(/px$/)) {
            val += 'rem';
        }
        return val;
    }
    window.px2rem = px2rem;

=================================================================

四、wap端头部meta常用设置

<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

=================================================================

五、判断横屏和竖屏

/*移动端通用
     *判断手机横竖屏状态
     * 翻转屏幕自动刷新页面
     */
    function hengshuping() {
        if (window.orientation == 180 || window.orientation == 0) {
            window.location.reload();/*竖屏状态*/
        }
        if (window.orientation == 90 || window.orientation == -90) {
            window.location.reload(); /*横屏状态*/
        }
    }
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

=================================================================

六、动画制作 参考“manyuemei”项目

第一步：切图png,把每一帧都切出来

第二步：使用TextureMerger序列帧动画，【导出】序列帧合成的图片和对应的json，并生成mym-a.json

第三步：使用ResDepot，生成资源配置res.json （把png生成在配置里面，json不可以生成在里面）

 <div class="q1"> <canvas width="240" height="241" id="mym-a"></canvas></div>

.q1{ top:px2rem(311); left:auto; right: px2rem(10);
      canvas {
        width:px2rem(179);
        height: px2rem(165);
      }
  }

var animates = {
        mymA:function () {
            //图片配置
            var mcConfig = {
                "mym-a-1":{"x":420,"y":975,"w":208,"h":193,"offX":11,"offY":23,"sourceW":240,"sourceH":241},
                "mym-a-2":{"x":210,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241},
                "mym-a-3":{"x":0,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241},
                "mym-a-4":{"x":1680,"y":780,"w":208,"h":193,"offX":11,"offY":25,"sourceW":240,"sourceH":241}
            };
            // MovieClip 可以通过duration控制两张图片轮播的速度。duration:0.2*10=2
            new MovieClip('mym-a', loader.get('mym-a_png').data,formatResData(mcConfig)).play();
        }
}animates.mymA();

==================================================================

七、微信打开网页键盘弹起后页面会被顶上去，键盘收起，页面没有回到原来的位置

解决方案：在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。

scrollTop ，有bug，如果连续点击input切换的话，会出现滚动的位置错乱

$("input").blur(function () {
   $("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});

或者是scrollTo ，有bug

//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight); 

完美解决方案： 无bug(根据当前滚动条的位置来计算，失去焦点后，重新让滚动条滚动到之前的位置，太完美了)

 $("input").blur(function () {
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });

测试连接：https://img.zai-art.com/web/app/demo/weixin.html

相关文章：微信打开网页键盘弹起后页面会被顶上去，键盘收起，页面无法回到原来的位置，导致弹框里的按钮响应区域错位 position为fixed

==================================================================

八、手机端公告无缝滚动，纯css3实现

<div class="moveBox">
      <div class="move">
           <div class="item">温馨提示：2019年2月4日当天最晚配送时间为下午18：00，给您带来不便，还望见谅！</div>
           <div class="item">温馨提示：2019年2月4日当天最晚配送时间为下午18：00，给您带来不便，还望见谅！</div>
       </div>
</div>

/*公告无缝滚动*/
.moveBox{position: relative; width:100%; margin: 0 auto px2rem(50); overflow: hidden; white-space:nowrap; }
.move{; left:100%; white-space:nowrap; animation:moveAni 15s infinite linear normal; }
.item{float: left; width:px2rem(800); font-size: px2rem(20);}
@keyframes moveAni{
  0%{left:;}
  100%{left: px2rem(-800); }   /*这里的滚动距离要和item的宽度保持一致，才可以实现无缝滚动*/
}