记录vue移动开发中碰到的问题

发表于 | 分类于

记录vue移动开发中碰到的问题

1、微信ios 向上向下拉动会露出底色的问题

出现原因：

全局滚动：滚动到页面顶部或底部时继续向下向上滑动，就会出现

局部滚动：滚动到页面顶部或底部时，手指离开停下，再继续向下向上滑动，就会出现

解决方法：

局部滚动：使用scrollFix

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function scrollFix(elem){
    // Variables to track inputs
    var startY, startTopScroll;
    
    elem = elem || document.querySelector(elem);
    
    // If there is no element, then do nothing  
    if(!elem)
        return;
    // Handle the start of interactions
    elem.addEventListener('touchmove', function(event){
        startY = event.touches[0].pageY;
        startTopScroll = elem.scrollTop;
        
        if(startTopScroll <= 0){
            document.body.scrollTop=0;  /* 最新ios版本，同时控制body才行 */
            elem.scrollTop = 1;
        }
        if(startTopScroll + elem.offsetHeight >= elem.scrollHeight)
            elem.scrollTop = elem.scrollHeight - elem.offsetHeight - 1;
            document.body.scrollTop=0;  
    }, false);
}

全局滚动暂时没看到比较好的方案。

使用iscroll 插件算是一种解决方案，可以有效的防止弹性滚动的问题，浏览器自带的滚动条会被禁止.

2、移动端scroll事件，不能实时触发

原因分析

ios的webview 内核 设定了其在进行momentum scrolling(弹性滚动)时,会停止所有的 事件响应 及 DOM操作引起的页面渲染 (亲测),故 onscroll 不能实时响应

参考文章：https://segmentfault.com/q/1010000004453730

解决方法

用touchmove事件代替scroll事件。

网上有人提到使用 setInterval 来监听 scrollTop ，试了下感觉效果也不是特别好，有时候触发迟缓。

3、上传图片问题

问题说明

webview 框架下，使用<input type="file">上传图片， 安卓端很多机型无法正常唤起系统相册来选择图片。

原因是有些安卓APP的WebView默认屏蔽了该控件的使用，所以导致调用失败。

解决方案

如果安卓开发人员能解决，这个就放心交给他们解决了。

网上搜到的解决方案

https://www.zhihu.com/question/30694230?sort=created

https://stackoverflow.com/questions/5907369/file-upload-in-webview%EF%BC%89

如果不能解决，这个可能要考虑用APP原生方法来调用了图片了，放弃 <input type="file">

4、iscroll插件安卓机点击不了

问题说明

iscroll插件在安卓机上会导致点击事件失效

解决方案

click事件添加如下代码，对ios和Android 区别处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function iScrollClick(){
    if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) return false;
    if (/Chrome/i.test(navigator.userAgent)) return (/Android/i.test(navigator.userAgent));
    if (/Silk/i.test(navigator.userAgent)) return false;
    if (/Android/i.test(navigator.userAgent)) {
        var s=navigator.userAgent.substr(navigator.userAgent.indexOf('Android')+8,3);
        return parseFloat(s[0]+s[3]) < 44 ? false : true
    }
}
this.myScroll = new IScroll(this.$els.content,{
    click:iScrollClick(),
    bounce:false,
    probeType: 3
});

iscroll在部分机型上，跳转到其他页面操作，返回滚动条失效的问题，使用refresh() 方法重新唤起滚动事件。

5、for key in obj 顺序是不定的

如果想要按顺序输出，则要注意重新排序了。

如果遍历数组，最好用for循环、forEach()方法遍历、es6的新方法for…of

6、第三方输入法会遮盖输入框

问题说明

一部分ios机型和安卓机型，底部输入框会遮盖输入法，主要出现在搜狗输入法，自带输入法没问题。

解决方案

使用scrollIntoViewIfNeeded 这个方法解决

1
2
3
4
5
6
7
window.addEventListener("resize", function() {
    if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
        window.setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
        },0);
    }
})

部分安卓机可以作判断

if(/Android [4-6]/.test(navigator.appVersion)) { ... }

参考资料：https://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element

7、单页面hash模式切换成history模式

问题说明

将项目切换成 HTML5 History 模式。

解决方案

首先路由配置要更改：

1
2
3
4
const router = new VueRouter({
mode: 'history',
routes: [...]
})

同时配置了一个404页面跳转，路径查找失败，跳转到404页面

1
2
3
4
5
6
'*':{
    name:'notFound',
    name: 'notFound', 
    component: notFound, 
    title: '' 
}

其次要运维这边配合，在服务器进行配置，依后端情况各异，具体配置参照vue-router官网

最后配置完发现，本地刷新和直接输入路径无法加载页面。解决方法是使用connect-history-api-fallback插件

1
2
3
4
5
var history = require('connect-history-api-fallback');
var connect = require('connect');
var app = connect()
        .use(history())
        .listen(3000);

8、图片预览，返回到上一个页面

问题说明

点击图片放大预览，直接点返回键，会退到上一个页面，而不是大图消失。

解决方案

两种解决方案：

第一种是将图片放大的功能单独写在一个页面，这样点击返回键，能正常使用。不过这种方案麻烦之处在于在新页面要重新请求接口，渲染图片。

第二种方案是操作history对象，改变浏览器的后退。我这种方案在PC端有向前键时行不通，还需要再研究研究…

以图片预览为例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 当图片放大时，使用pushState 塞入一个地址
showAlbum(){
    this.show=true;
    history.pushState({}, '', location.href+'&album=1');
}
// 当点击图片缩小时，使用replaceState 替换地址，并手动后退
hideAlbum(){
    history.replaceState({}, '', location.href.split('&album=1')[0]);
    history.back();
    this.show=false;          
}
// 最后监听返回事件，只针对messageDetail页面
var that=this;
window.addEventListener("popstate", function() {  
    if(that.$route.name=='messageDetail' && that.show){
        that.show=false;
    }                     
});

显示 Gitment 评论