前言

一直比較習(xí)慣把一些東西記錄在云筆記里逃魄，但是這樣就沒辦法共享
雖然之前斷斷續(xù)續(xù)寫過一段時間的博客，由于各種原(tou)因(lan)閑置了很久澜搅，現(xiàn)在又回來開始寫博客伍俘，希望能夠堅持下去
廢話不多說了邪锌，還是進(jìn)入正題吧

項目要點難點

1. 仿apple官網(wǎng)輪播效果
2. 禁用滾動
3. 網(wǎng)頁調(diào)起百度地圖和高德地圖app
4. 安卓reload失效，蘋果返回不刷新

1.仿apple官網(wǎng)輪播效果

這里是以swiper為基礎(chǔ)修改而成癌瘾，參考了里面提供的一個demo效果觅丰，但是demo使用的是swiper2，我將其改成了swiper3可用
值得注意的一點是妨退，開啟了watchSlidesProgress之后妇萄，會使onSlideChangeEnd回調(diào)方法在手指緩慢劃動時失效咬荷，如有需要可使用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的微信瀏覽器下冠句，滑動到底部繼續(xù)往下劃的話，會出現(xiàn)灰色塊如下幸乒，客戶要求禁止掉這一動作

微信圖片_20171024145537.png

3. 網(wǎng)頁調(diào)起高德地圖app

高德地圖API
以單點標(biāo)注為例
URL: //uri.amap.com/marker?position=121.287689,31.234527&name=park&src=mypage&coordinate=gaode&callnative=0

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

客戶要求首頁點擊logo刷新本頁罕扎，一開始使用window.location.reload()進(jìn)行刷新
經(jīng)過測試后ios沒問題聚唐，但是部分安卓微信瀏覽器無效

以下方法轉(zhuǎn)自https://segmentfault.com/a/1190000006753455
原理是給跳轉(zhuǎn)路徑添加一個時間戳參數(shù)，如果已經(jīng)存在該參數(shù)則替換

function updateUrl(url,key)  
{  
    var key = (key || 't') + '='; //默認(rèn)是“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);

關(guān)于解決ios返回不刷新的問題，我使用sessionStorage去記錄訪問歷史臀蛛，監(jiān)聽popstate事件控制跳轉(zhuǎn)行為
若各位有更好的方法亲桦，請評論告知哈，感謝感謝

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瀏覽器中掺栅，初次進(jìn)入頁面時會立刻觸發(fā)popstate事件烙肺，顧添加一個定時器延時綁定事件
}