【web移动端】项目所遇到的问题--2019/05/29

问题1： 阻止弹窗页面的滑动时，弹窗下的下主页面也滑动；

a.弹窗内元素不需要滑动时：

当打开弹窗组件时，禁止滑动；

此时只需要在弹窗的组件元素上加上：@touchmove.prevent=""

                           

b. 弹窗内元素需要滑动时（组件参考上图）：

此时不要添加：@touchmove.prevent=""

解决步骤：

首先：打开弹窗的时候，看html，body的高度是否设置了100%；

           在检查这个弹窗组件的引用处的盒子高度是不是100%；若不是请先设为100%；也就是设备的高；

其次：有个属性监控到了弹窗是否打开或者关闭；利用这个属性在生命周期做些事情；如下图；

                           

问题2：度小满金融端内打开弹窗时，向上滑动或者向下的时候触发了端的整体滑动事件，导致影响弹窗的展示；

效果图

                           

解决步骤：

首先：在项目中的工具（utils.js）文件中，抒写两个方法，如下图

                           

其次：在你需要的弹窗组件内使用这个方法；打开时与关闭时调用相应的方法；

                            

问题3：机型与css元素兼容描述

• placeholder 元素

此元素并不是在所有的机型中位置是一样的，我们只能做到各个机型中位置不差别太离谱；

微调是：给input固定高于行高，同时也可以调整placeholder的样式

input-placeholder ： { 设置样式用于微调 }

• iphone机子的button、input等背景颜色不是预期设置的；
        解决如下：
       
   
• 度小满APP内页面设置了可滚动，此时在一些年久的机型上会有灰色的滑动线，如下图

解决步骤：

首先：找到这个盒子，对于横滚动划线，添加：overflow-x:hidden;

其次：对于竖线（y轴），做个假象：设置有滚动条的盒子的宽要比父盒子的宽大20像素，

然后利用padding-right：20px；把内容并挤回来，

这个数值根据情况调整吧；