最近做了一個(gè)前端項(xiàng)目，其中用到了 Swiper 插件，對(duì)于我一個(gè)后臺(tái)來(lái)說(shuō)這個(gè)項(xiàng)目簡(jiǎn)直是一種煎熬，遇到了很多問(wèn)題，在這里和大家分享下。

　　

　　　　 // swiper輪播上邊this.galleryTop = new Swiper('.gallery-top', {spaceBetween: 0, // 在slide之間設(shè)置距離（單位px）。noSwiping: true, // 設(shè)為true時(shí)，可以在slide上（或其他元素）增加類(lèi)名'swiper-no-swiping'，使該slide無(wú)法拖動(dòng)observer: true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiperobserveParents: true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiperon: {touchStart: function (event) { // touchStart 當(dāng)碰觸到slider時(shí)執(zhí)行 activeIndex 返回當(dāng)前索引值if (this.activeIndex == 1) {that.galleryTop.allowSlidePrev = false // 控制是否可以切換到上一個(gè)} else {that.galleryTop.allowSlidePrev = true // 控制是否可以切換到上一個(gè)}},slideChange: function () { // slideChange 當(dāng)前Slide切換時(shí)執(zhí)行(activeIndex發(fā)生改變)}}})

上面為Swiper初始化，其中的黃色標(biāo)注就是坑所在

問(wèn)題描述：

　　比如說(shuō)現(xiàn)在滑動(dòng)的卡片有4個(gè)，如代碼所示，如果當(dāng)前活動(dòng)的下標(biāo)為1，也就是第二個(gè)卡片，則將其設(shè)置為禁止向左滑動(dòng)，也就是 “that.galleryTop.allowSlidePrev = false”，這樣卡片就不能向左滑動(dòng)，但是可以向右滑動(dòng)，不過(guò)這個(gè)時(shí)候你如果使用 “galleryTop.slideTo(0)”（解釋：作用是控制卡片跳轉(zhuǎn)到指定下標(biāo)的卡片），就會(huì)出現(xiàn)問(wèn)題，如果你設(shè)置了第二個(gè)卡片禁止向左滑動(dòng)，你用“galleryTop.slideTo(0)”指定跳轉(zhuǎn)到第一個(gè)卡片就會(huì)不起作用，但是可以指定該卡片右邊的卡片，也就是“galleryTop.slideTo(2)”，總結(jié)來(lái)說(shuō)，你只要設(shè)置了向左禁止滑動(dòng)，所有的向左的指定卡片跳轉(zhuǎn)“galleryTop.slideTo(0)”都不起作用；

原因：

　　

　　如圖所示只要你設(shè)置了該屬性，向左滑動(dòng)禁用，并且按鈕組件失效，也就是說(shuō)你只要設(shè)置了該屬性，它就會(huì)一直處于向左禁用的狀態(tài)

解決方法：

　　在你使用 “galleryTop.slideTo(0)” 之前加上 “galleryTop.allowSlidePrev = true” 先解除禁用，在進(jìn)行跳轉(zhuǎn)就可以了。

轉(zhuǎn)載于:https://www.cnblogs.com/Singulariity-gs/p/11155792.html

總結(jié)

以上是生活随笔為你收集整理的Swiper使用心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。