鍍金池/ 問答/HTML5  HTML/ swiper插件動(dòng)態(tài)插入slider無法監(jiān)聽mySwiper.slides的to

swiper插件動(dòng)態(tài)插入slider無法監(jiān)聽mySwiper.slides的touch事件

之前swiper在手機(jī)上超出一屏的內(nèi)容無法顯示,于是在網(wǎng)上搜了這段代碼

 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);

當(dāng)swiper-slide寫死時(shí)是有效果的,也就是swiper的結(jié)構(gòu)是這樣的時(shí)候:

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

但是后來是根據(jù)接口返回的數(shù)據(jù)動(dòng)態(tài)創(chuàng)建swiper-slide然后插入到swiper-wrapper中,這時(shí)候上面那段滑動(dòng)代碼就失效了,原因是獲取不到mySwiper.slides這個(gè),怎么解決

回答
編輯回答
赱丅呿

數(shù)據(jù)渲染以后要重新初始化才生效。

2018年8月19日 10:37