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

6

私はこれが古い質問であることを知っています。しかし、Swiper 3 では、ディーンの答えは機能しません。

私の解決策は、 class="swiper-no-swiping" を SELECT タグに追加することです。

お役に立てれば。

于 2015-09-17T13:33:25.527 に答える
2

または、デスクトップでタッチ イベントが必要ない場合は、オプションで無効にできますsimulateTouch。

参照: http://idangero.us/swiper/api/

于 2016-05-06T15:24:46.527 に答える