swiper4-屏幕右侧判断slide是否进入屏幕(已解决)

半糊涂丶 · 发表于 2019-5-8 10:48:59

本帖最后由半糊涂丶于 2019-5-9 06:40 编辑

从官网下载的包中有一些demo，最后一个是右滑出现菜单栏

但我想把它改成左滑出现菜单栏，然后··就没有然后了

研究了一会才发现 注册的 slideChangeTransitionStart(splice发生改变触发)， 没有触发，我研究出来的原因是 swiper 是从左侧判断splice进出的，但我想要的效果是 splice是从右侧进出，所以不能触发 slideChangeTransitionStart，看了许久，没解决，求大神指点

半糊涂丶 · 发表于 2019-5-8 10:49:47

本帖最后由半糊涂丶于 2019-5-8 10:52 编辑

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="utf-8">
      <title>Swiper demo</title>
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

      
      <link rel="stylesheet" href="../dist/css/swiper.min.css">

      
      <style>
            html, body {
                     position: relative;
                     height: 100%;
            }
            body {
                     background: #eee;
                     font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
                     font-size: 14px;
                     color: #000;
                     margin: 0;
                     padding: 0;
            }
            .swiper-container {
                     width: 100%;
                     height: 100%;
            }
            .swiper-slide {
                     text-align: center;
                     font-size: 18px;
                     background: #fff;

                     /* Center slide text vertically */
                     display: -webkit-box;
                     display: -ms-flexbox;
                     display: -webkit-flex;
                     display: flex;
                     -webkit-box-pack: center;
                     -ms-flex-pack: center;
                     -webkit-justify-content: center;
                     justify-content: center;
                     -webkit-box-align: center;
                     -ms-flex-align: center;
                     -webkit-align-items: center;
                     align-items: center;
            }
            .menu {
                     min-width: 100px;
                     width: 70%;
                     max-width: 320px;

                     background-color: #2C8DFB;
                     color: #fff;
            }
            .content {
                     width: 100%;
            }

            .menu-button {
                     position: absolute;
                     top: 0px; right: -1px;

                     padding: 15px;

                     cursor: pointer;

                     -webkit-transition: .3s;
                     transition: .3s;

                     background-color: #2C8DFB;

                     /*margin: 14px;
                     border-radius: 5px;*/
            }
            .menu-button .bar:nth-of-type(1) {
                     margin-top: 0px;
            }
            .menu-button .bar:nth-of-type(3) {
                     margin-bottom: 0px;
            }

            .bar {
                     position: relative;
                     display: block;

                     width: 50px;
                     height: 5px;

                     margin: 10px auto;
                     background-color: #fff;

                     border-radius: 10px;

                     -webkit-transition: .3s;
                     transition: .3s;
            }

            .menu-button:hover .bar:nth-of-type(1) {
                     -webkit-transform: translateY(1.5px) rotate(-4.5deg);
                     -ms-transform: translateY(1.5px) rotate(-4.5deg);
                     transform: translateY(1.5px) rotate(-4.5deg);
            }
            .menu-button:hover .bar:nth-of-type(2) {
                     opacity: .9;
            }
            .menu-button:hover .bar:nth-of-type(3) {
                     -webkit-transform: translateY(-1.5px) rotate(4.5deg);
                     -ms-transform: translateY(-1.5px) rotate(4.5deg);
                     transform: translateY(-1.5px) rotate(4.5deg);
            }

            .cross .bar:nth-of-type(1) {
                     -webkit-transform: translateY(15px) rotate(-45deg);
                     -ms-transform: translateY(15px) rotate(-45deg);
                     transform: translateY(15px) rotate(-45deg);
            }
            .cross .bar:nth-of-type(2) {
                     opacity: 0;
            }
            .cross .bar:nth-of-type(3) {
                     -webkit-transform: translateY(-15px) rotate(45deg);
                     -ms-transform: translateY(-15px) rotate(45deg);
                     transform: translateY(-15px) rotate(45deg);
            }
            .cross:hover .bar:nth-of-type(1) {
                     -webkit-transform: translateY(13.5px) rotate(-40.5deg);
                     -ms-transform: translateY(13.5px) rotate(-40.5deg);
                     transform: translateY(13.5px) rotate(-40.5deg);
            }
            .cross:hover .bar:nth-of-type(2) {
                     opacity: .1;
            }
            .cross:hover .bar:nth-of-type(3) {
                     -webkit-transform: translateY(-13.5px) rotate(40.5deg);
                     -ms-transform: translateY(-13.5px) rotate(40.5deg);
                     transform: translateY(-13.5px) rotate(40.5deg);
            }
      </style>
</head>
<body>
      
      <div class="swiper-container">
            <div class="swiper-wrapper">
                     
                     <div class="swiper-slide content">
                              <div class="menu-button">
                                    <div class="bar"></div>
                                    <div class="bar"></div>
                                    <div class="bar"></div>
                              </div>
                              Content slide
                     </div>
                     
                     <div class="swiper-slide menu">Menu slide</div>
            </div>
      </div>

      
      <script src="../dist/js/swiper.min.js"></script>

      
      <script>
var menuButton = document.querySelector('.menu-button');
var openMenu = function (swiper) {
   swiper.slidePrev();
};

   var swiper = new Swiper('.swiper-container', {
   slidesPerView: 'auto',
   initialSlide: 1,
   resistanceRatio: 0,
   slideToClickedSlide: true,

   on: {
      slideChangeTransitionStart: function () {
      var slider = this;

      console.log(slider.activeIndex)
      if (slider.activeIndex === 0) {
         menuButton.classList.add('cross');
         // required because of slideToClickedSlide
         menuButton.removeEventListener('click', openMenu, true);
      } else {
         menuButton.classList.remove('cross');
      }
      },
      slideChangeTransitionEnd: function () {
      var slider = this;
      if (slider.activeIndex === 1) {
         menuButton.addEventListener('click', openMenu, true);
      }
      },
      slidesPerView: function(){
            console.log(333)
      }
   }
});
      </script>

</body>
</html>

半糊涂丶 · 发表于 2019-5-9 06:41:05

只需要加上 normalizeSlideIndex: false, 就可以了

swiper4-屏幕右侧判断slide是否进入屏幕(已解决)

浏览过的版块