在微信html5中,做了上下滑动翻页效果,js获取的是section标签, 也就意味着每一个翻页的内容都要用section包裹,但在section包裹之下,用input 会失效,把input单独提取出来不被sectoin包裹,实现起来就没有问题。下面是代码:
<section id="s1" data="1" >
<input type="file" style=" position: absolute;top: 70%;z-index: 9;" />
<img class="head_img" data="img/head_img1.png" alt="" src="img/head_img1.png">
</section>
下面是js代码(滑动效果):
var sections = document.querySelectorAll('section');
var nowData=1 , nextData , preData , nowId , nextId , preId;
var animation = false;
var startY, moveY;
this.touchStart = function(event,target){
event.preventDefault();
var touch = event.targetTouches[0]; //位于当前DOM元素上的手指的一个列表
startY = touch.pageY;
moveY = 0;
}
this.touchMove = function(event){
event.preventDefault();
var touch = event.touches[0];
moveY = touch.pageY - startY;
}
this.touchEnd = function(event){
event.preventDefault();
if (animation == false) {
nowData = parseInt(this.getAttribute('data'));
nowId = document.getElementById('s' + nowData);
nextData = nowData + 1;
nextId = document.getElementById('s' + nextData);
preData = nowData - 1;
preId = document.getElementById('s' + preData);
if (moveY < -50 && nowData < sections.length) {
$(".rightan").show();
if (nowData==6) {$(".rightan").hide();}
animation = true;
nowId.style.zIndex = '11';
nextId.style.zIndex = '20';
nextId.style.display = 'block';
nowId.className = 'pt-page-moveToTop pt-page-ontop';
nextId.className = 'pt-page-scaleUp';
setTimeout(function(){
nowId.style.display = 'none';
animation = false;
},600);
}else if(moveY > 50 && nowData!=1 ){
$(".rightan").show();
if (nowData==6) {$(".rightan").show();}
if (nowData==2) {$(".rightan").hide();}
animation = true;
nowId.style.zIndex = '11';
preId.style.zIndex = '20';
preId.style.display = 'block';
nowId.className = 'pt-page-moveToBottom pt-page-ontop';
preId.className = 'pt-page-scaleUp';
setTimeout(function(){
nowId.style.display = 'none';
animation = false;
},600);
}
}
}
input输入的时候的click事件,被你的touchstart回调阻止了。。。。e.preventDefault