6

我有一个使用 swiper 滑动页面的桌面应用程序，但是当我在幻灯片页面中放置选择标签时，选择标签无法弹出下拉框，有人遇到过这个问题吗？提前谢谢！这里的演示是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">     </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
    $(function(){
        $('.swiper-container, .swiper-slide').css({
            height: ($(window).height())  + 'px',
            width: '100%'
        });
        var mySwiper = $('.swiper-container').swiper({
            //Your options here:
            mode:'horizontal',
            loop: false,
            keyboardControl: true,
            // mousewheelControl: true,
            onSlideChangeStart: function(swiper){
                pageCurrentNum = swiper.realIndex;
                $('#currentPage').text(pageCurrentNum + 1);
                gridster = null;
                gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
                if(!confingInfo.isDebug){
                    gridster.disable();
                }
            },
        });
    })
</script>

</head>
<body>
    <div class="swiper-container responsive">
        <div class="swiper-wrapper" style="background:red;">
        <!--First Slide-->
        <div class="swiper-slide ">
            page1
            <select>
                <option>test1</option>
                <option>test2</option>
                <option>test3</option>
            </select>
        </div>

          <!--Second Slide-->
          <div class="swiper-slide">
            page2
          </div>
      </div>
    </div>  

   </body>
</html>
4

3 回答 3

8

我通过使用下划线的代码解决了这个问题：

   $('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
           e.stopPropagation();
   });

希望能帮到和我一样遇到同样问题的你！

于 2013-06-09T02:51:44.647 回答
6

我知道这是个老问题。但是在 Swiper 3 上，Dean 的回答不起作用。

我的解决方案是将 class="swiper-no-swiping" 添加到 SELECT 标签。

希望这可以帮助。

于 2015-09-17T13:33:25.527 回答
2

或者，如果您不需要桌面上的触摸事件，您可以使用选项禁用它simulateTouch。

见：http: //idangero.us/swiper/api/

于 2016-05-06T15:24:46.527 回答