使用better-scroll无法进行无缝切换的原因与自动播放的冲突、与fastclick的点击冲突
生活随笔
收集整理的這篇文章主要介紹了
使用better-scroll无法进行无缝切换的原因与自动播放的冲突、与fastclick的点击冲突
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
原因是版本更新,之前的寫法是:
this.slider = new BScroll(this.$refs.slider, {scrollX: true,scrollY: false,momentum: false,snap: true,snapLoop: this.loop,snapThreshold: 0.3,snapSpeed: 400})現在修改為
this.slider=new BScroll(this.$refs.slider,{scrollX:true,scrollY:false,momentum:false,snap:{loop:this.loop,snapThreshold:0.3,snapSpeed:400},click:true})在使用自動播放的時候,會出現的一種情況是,播放到最后一頁的時候,無法自動跳轉到第一頁,播放的函數是:
play() {let pageIndex = this.currentPageIndex + 1if (this.loop) {pageIndex += 1}this.timer = setTimeout(() => {this.slider.goToPage(pageIndex, 0, 400)}, this.interval)}改進為:
play(){this.timer = setTimeout(()=>{this.slider.next()},this.interval)}解決了上述問題后,出現的一種情況是點擊圖片后無法進行跳轉,原因是與fastclick的點擊事件有沖突,搜羅了網上的解決辦法
首先方法一:
//1.在使用better-scroll的地方增加如下代碼 import BScroll from 'better-scroll'export default {props: {probeType: {type: Number,default: 1},click: {type: Boolean,default: true//確實需要點擊事件},//2.在<img>標簽中增加class="needscilck"<img class="needsclick" :src="item.picUrl">但是我使用上述辦法并沒有解決,找到了方法二:
this.slider=new BScroll(this.$refs.slider,{scrollX:true,scrollY:false,momentum:false,snap:{loop:this.loop,snapThreshold:0.3,snapSpeed:400},tap:true,click:true})//在初始化時增加了tap:true以及click:true后可以實現跳轉?
總結
以上是生活随笔為你收集整理的使用better-scroll无法进行无缝切换的原因与自动播放的冲突、与fastclick的点击冲突的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 机器人涂装工程师岗位英文缩写_机器人喷涂
- 下一篇: 前端程序员入门、进阶必备的5大网站,你知