前言
一直比较习惯把一些东西记录在云笔记里，但是这样就没办法共享
虽然之前断断续续写过一段时间的博客，由于各种原(tou)因(lan)闲置了很久，现在又回来开始写博客，希望能够坚持下去
废话不多说了，还是进入正题吧
项目要点难点
- 仿apple官网轮播效果
- 禁用滚动
- 网页调起百度地图和高德地图app
- 安卓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事件，顾添加一个定时器延时绑定事件
}
