触屏版web，绑定swipe后页面滚动失效的问题。

2014-01-27 09:36:43 516 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

微信小程序开发：解决swiper内scroll-view滚动失效的3种实用方案本文深度剖析了微信小程序开发中swiper嵌套scroll-view导致滚动失效的常见问题，揭示了其根源在于高度计算与样式继承。文章提供了三种实用解决方案：基于CSS的百分比高度继承法、动态计算高度的JS适配法以及利用增强特性的辅助方案，并给出了进阶排查清单与性能优化建议，帮助开发者彻底解决滚动失效难题。阅读详情

屏幕滑动之后，页面就不能滚动了，请问怎么解决啊？



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title> Moblie </title>

<script src="http://lib.sinaapp.com/js/jquery/2.0.3/jquery-2.0.3.min.js"></script>

<script>



$(function(){

	var $wrap = $("#swipebox");

	$wrap

	.swipeEvents()

	.on("swipeDown",  function(){ 

		$('#loading').html("Swipe Down"); 

	 });

});





(function($) { 

  $.fn.swipeEvents = function() {

    return this.each(function() {

      

      var startX,

          startY,

          $this = $(this);

      

      $this.on('touchstart', touchstart);

      

      function touchstart(event) {

        var touches = event.originalEvent.touches;

        if (touches && touches.length) {

          startX = touches[0].pageX;

          startY = touches[0].pageY;

          $this.on('touchmove', touchmove);

        }

        event.preventDefault();

      }

      

      function touchmove(event) {

        var touches = event.originalEvent.touches;

        if (touches && touches.length) {

          var deltaX = startX - touches[0].pageX;

          var deltaY = startY - touches[0].pageY;

          

          if (deltaX >= 50) {

            $this.trigger("swipeLeft");

          }

          if (deltaX <= -50) {

            $this.trigger("swipeRight");

          }

          if (deltaY >= 50) {

            $this.trigger("swipeUp");

          }

          if (deltaY <= -50) {

            $this.trigger("swipeDown");

          }

          if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {

            $this.off('touchmove', touchmove);

          }

        }

        event.preventDefault();

      }

      

    });

  };

})(jQuery);





</script>







<style>

	.swipebox{width:100%;background:gray;}

</style>

</head>



<body>

<div id="loading"></div>

<div id="swipebox" class="swipebox">

	<p>swipe1</p>

	<p>swipe2</p>

	<p>swipe3</p>

	<p>swipe4</p>

	<p>swipe5</p>

	<p>swipe6</p>

	<p>swipe7</p>

	<p>swipe8</p>

	<p>swipe9</p>

	<p>swipe10</p>

	<p>swipe11</p>

	<p>swipe12</p>

	<p>swipe13</p>

	<p>swipe14</p>

	<p>swipe15</p>

	<p>swipe16</p>

	<p>swipe17</p>

	<p>swipe18</p>

	<p>swipe19</p>

	<p>swipe20</p>

	<p>swipe21</p>

	<p>swipe22</p>

	<p>swipe23</p>

	<p>swipe24</p>

	<p>swipe25</p>

	<p>swipe26</p>

	<p>swipe27</p>

	<p>swipe28</p>

	<p>swipe29</p>

	<p>swipe30</p>

	<p>swipe31</p>

	<p>swipe32</p>

	<p>swipe33</p>

	<p>swipe34</p>

	<p>swipe35</p>

	<p>swipe36</p>

	<p>swipe37</p>

	<p>swipe38</p>

	<p>swipe39</p>

	<p>swipe40</p>

	<p>swipe41</p>

	<p>swipe42</p>

	<p>swipe43</p>

	<p>swipe44</p>

	<p>swipe45</p>

	<p>swipe46</p>

	<p>swipe47</p>

	<p>swipe48</p>

</div>





</body>

</html>