swiper插件动态插入slider无法监听mySwiper.slides的touch事件

Question

之前swiper在手机上超出一屏的内容无法显示，于是在网上搜了这段代码

 var startScroll, touchStart, touchCurrent;
        mySwiper.slides.on('touchstart', function (e) {
            startScroll = this.scrollTop;
            touchStart = e.targetTouches[0].pageY;
        }, false);
        mySwiper.slides.on('touchmove', function (e) {
            touchCurrent = e.targetTouches[0].pageY;
            var touchesDiff = touchCurrent - touchStart;
            var slide = this;
            var onlyScrolling =
                (slide.scrollHeight > slide.offsetHeight) && //allow only when slide is scrollable
                (
                    (touchesDiff < 0 && startScroll === 0) || //start from top edge to scroll bottom
                    (touchesDiff > 0 && startScroll === (slide.scrollHeight - slide.offsetHeight)) || //start from bottom edge to scroll top
                    (startScroll > 0 && startScroll < (slide.scrollHeight - slide.offsetHeight)) //start from the middle
                );
            if (onlyScrolling) {
                e.stopPropagation();
            }
        }, false);

当swiper-slide写死时是有效果的，也就是swiper的结构是这样的时候：

<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
            ...
            ...
        </div>
    </div>

但是后来是根据接口返回的数据动态创建swiper-slide然后插入到swiper-wrapper中，这时候上面那段滑动代码就失效了，原因是获取不到mySwiper.slides这个，怎么解决

Answer 1

数据渲染以后要重新初始化才生效。