官网项目总结

前言

一直比较习惯把一些东西记录在云笔记里，但是这样就没办法共享
虽然之前断断续续写过一段时间的博客，由于各种原(tou)因(lan)闲置了很久，现在又回来开始写博客，希望能够坚持下去
废话不多说了，还是进入正题吧

项目要点难点

1. 仿apple官网轮播效果
2. 禁用滚动
3. 网页调起百度地图和高德地图app
4. 安卓reload失效，苹果返回不刷新

1.仿apple官网轮播效果

这里是以swiper为基础修改而成，参考了里面提供的一个demo效果，但是demo使用的是swiper2，我将其改成了swiper3可用
值得注意的一点是，开启了watchSlidesProgress之后，会使onSlideChangeEnd回调方法在手指缓慢划动时失效，如有需要可使用onTransitionEnd代替

var topSwiper = new Swiper ('#index-top-swiper', {
        autoplay: 6000,
        watchSlidesProgress: true,
        speed: 600,
        loop: true,
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        onProgress: function(swiper) {
            for (var c = 0; c < swiper.slides.length; c++) {
                var d = swiper.slides[c],
                b = d.progress,
                e;
                0 < b ? (e = .9 * b * swiper.width, scale = 1 - .1 * b, 1 < b && (scale = .9), txtPositionX = 0, txtPositionY = 30 * b + "px") : (e = 0, scale = 1, txtPositionX = 1E3 * -b + "px", txtPositionY = 0);
                var es = d.style;
                var es2 = d.querySelectorAll(".swiper-scale-item")[0].style;
                es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform = "translate3d(" + e + "px,0,0)";
                es2.webkitTransform = es2.MsTransform = es2.msTransform = es2.MozTransform = es2.OTransform = es2.transform = "scale(" + scale + ")";
            }
        },
       onTouchStart: function(swiper) {
            for (var c = 0; c < swiper.slides.length; c++) {
                swiper.slides[c].querySelectorAll(".swiper-scale-item")[0].style.transitionDuration = '0ms';
                swiper.slides[c].style.transitionDuration = '0ms';
            }
        },
        onSetTransition: function(swiper, c) {
            for (var d = 0; d < swiper.slides.length; d++) {
                swiper.slides[d].querySelectorAll(".swiper-scale-item")[0].style.transitionDuration = c + 'ms';
                swiper.slides[d].style.transitionDuration = c + 'ms';
            }
        }
    });

2. 禁用滚动

在ios的微信浏览器下，滑动到底部继续往下划的话，会出现灰色块如下，客户要求禁止掉这一动作

微信图片_20171024145537.png
本来是想通用对touchmove事件的preventDefault()去禁止滑动，但是后来发现了一个很方便的jquery.disablescroll.js
如下简单地调用就可以禁止\开启滚动
$(window).disablescroll();
$(window).disablescroll("undo");

3. 网页调起高德地图app

高德地图API
以单点标注为例
URL: //uri.amap.com/marker?position=121.287689,31.234527&name=park&src=mypage&coordinate=gaode&callnative=0

4. 安卓reload失效，苹果返回不刷新

客户要求首页点击logo刷新本页，一开始使用window.location.reload()进行刷新
经过测试后ios没问题，但是部分安卓微信浏览器无效

以下方法转自https://segmentfault.com/a/1190000006753455
原理是给跳转路径添加一个时间戳参数，如果已经存在该参数则替换

function updateUrl(url,key)  
{  
    var key = (key || 't') + '='; //默认是“t”  
    var reg = new RegExp(key + '\\d+');//正则：t=1472286066028  
    var timestamp = +new Date();  
    if(url.indexOf(key)>-1)//有时间戳，直接更新  
    {  
        return url.replace(reg, key + timestamp);  
    }  
    else //没有时间戳，加上时间戳  
    {  
        if(url.indexOf('\?')>-1)  
        {  
            var urlArr = url.split('\?');  
            if(urlArr[1])  
            {  
                return urlArr[0] + '?' + key + timestamp + '&' + urlArr[1];  
            }  
            else  
            {  
                return urlArr[0] + '?' + key + timestamp;  
            }  
        }  
        else  
        {  
            if(url.indexOf('#')>-1)  
            {  
                return url.split('#')[0]+'?'+key+timestamp+location.hash;  
            }  
            else  
            {  
                return url + '?' + key + timestamp;  
            }  
        }  
    }  
}  
window.location.href = updateUrl(location.href);

关于解决ios返回不刷新的问题，我使用sessionStorage去记录访问历史，监听popstate事件控制跳转行为
若各位有更好的方法，请评论告知哈，感谢感谢

function pushHistory(){
    var historyUrl = sessionStorage.getItem('history');
    if(historyUrl){
        historyUrl = historyUrl.split(',');
        historyUrl.push(window.location.href);
        historyUrl = historyUrl.join(',');
        sessionStorage.setItem('history', historyUrl);
    }
    else{
        sessionStorage.setItem('history', window.location.href);
    }
    var state = {title:"", url: "#"}; 
    window.history.pushState(state, "", "#"); 
}
function popHistory(){
    window.addEventListener("popstate", function(e){
        var historyUrl = sessionStorage.getItem('history');
        historyUrl = historyUrl.split(',');
        var len = historyUrl.length;
        if(len <= 1) {
            history.pushState(null, null, historyUrl[0]);
            return false;
        }
        historyUrl.pop();
        var url = updateUrl(historyUrl[len-2]);
        historyUrl.pop();
        historyUrl = historyUrl.join(',');
        sessionStorage.setItem('history', historyUrl);
        window.location.href = url;
    }, false); 
}
$(document).ready(function(){
  pushHistory();
});
window.onload = function(){
    setTimeout(popHistory, 0); //在旧版本webkit浏览器中，初次进入页面时会立刻触发popstate事件，顾添加一个定时器延时绑定事件
}