首先，这是我第一次在这个平台上写文章，如果有不好的地方，还请各位指点哦，谢谢。【PS：本人小白一枚】

 

背景

在公司参与一个原生APP和h5混合开发的项目，本人在项目中负责h5部分，现将项目中遇到的问题总结如下：

具体问题

问题1：页面滚动条问题

问题描述

web页面在PC浏览器上浏览时有滚动条；但是，在移动端浏览器打开时，没有滚动条

解决方法

将页面的最外层(我一般在写页面时，会在body标签内写一个大容器，用于存放页面的内容)设置overflow:auto/scroll;并且不能设置height属性的值(height:100%也不行)

• 例子
  
  

//法一：
document.getElementById('list5').addEventListener('touchstart',callback, false);
document.getElementById('list5').removeEventListener('touchstart',callback, false);
document.getElementById('list5').addEventListener('touchend',callback, false);
document.getElementById('list5').removeEventListener('touchend',callback, false);

//法二：
document.getElementById('list5').addEventListener('touchstart',function(e){
	e.preventDefault();
}, false);

document.getElementById('list5').addEventListener('touchend',function(e){
	e.preventDefault();
}, false);

//js部分：
e.preventDefault();

//css部分：
-webkit-touch-callout: none; //解决闪退
//禁止复制
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;

//HTML部分：
<div class='class1'></div>

//css部分：
.class1{
	border: 1px solid #ccc;
}

//css部分
/*移动端正常展示1px的问题 start*/
%border-1px{
    display: block;
    position:absolute;
    left: 0;
    width: 100%;
    content: ' ';
}
.border-1px{
    position: relative;
    &::after{
        @extend %border-1px;
        bottom: 0;
        border-top: 1px solid #ccc;
    }
    &::before{
        @extend %border-1px;
        top: 0;
        border-bottom: 1px solid #ccc;
    }
}

@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}
/*移动端正常展示1px的问题 end*/

//解码"="号
dom.token = decodeURI($.query.get("token"));//插件
//获取无需解码的值
dom.msgid = $.query.get("msgid");

var time = "2017-12-26 19:36:00";
time = time.replace(/\-/g, "/");//将时间格式的'-'转成'/'形式，兼容iOS

问题描述2 【20180709】

后台提供的时间格式缀有“.0”，导致ios解析失败，ios日期显示：NaN问题

 

解决方法2

解决方法：去掉时间格式的".0"后缀

 

代码2

var time = "2018-07-09 09:13:53.0";
//法一：
time = time.substr(0,time.length-2);  //解决时间后面缀有.0的情况【去掉.0】
//法二：
time = time.slice(0,time.indexOf("."));  //本人使用此方法

$(document.body).pullToRefresh(function(){
    //下拉刷新的代码
});