html轮播图鼠标可以暂停,为什么better scroll轮播鼠标点击就会暂停？

简单修改了下你的代码,点击不会暂停了

• v-for="item in ['http://e.hiphotos.baidu.com/image/h%3D300/sign=a9e671b9a551f3dedcb2bf64a4eff0ec/4610b912c8fcc3cef70d70409845d688d53f20f7.jpg','http://a.hiphotos.baidu.com/image/h%3D300/sign=a62e824376d98d1069d40a31113eb807/838ba61ea8d3fd1fc9c7b6853a4e251f94ca5f46.jpg','http://f.hiphotos.baidu.com/image/h%3D300/sign=0c78105b888ba61ec0eece2f713597cc/0e2442a7d933c8956c0e8eeadb1373f08202002a.jpg']"

  >

import BScroll from 'better-scroll'

export default {

name: 'home',

created() {

for (let i = 0; i < 100; i++) {

this.data[i] = i

}

},

mounted() {

this.$nextTick(() => {

this.setSlideWidth()

this.initSlide()

this._play()

})

},

data() {

return {

data: [],

scroll: null,

timer: null,

dots: [1, 2, 3],

currentIndex: 0

}

},

methods: {

// 设置容器宽度

setSlideWidth() {

let slideWidth = 0

let children = this.$refs.ul.children

for (let i = 0; i < children.length; i++) {

children[i].style.width = this.$refs.slide.clientWidth + 'px'

slideWidth += children[i].offsetWidth

}

this.$refs.ul.style.width = slideWidth + this.$refs.slide.clientWidth * 2 + 'px'

},

// 初始化slide

initSlide() {

this.slide = new BScroll(this.$refs.slide, {

scrollX: true,

scrollY: false,

momentum: false,

snap: {

loop: this.loop || true,

threshold: this.threshold || 0.3,

speed: this.speed || 400

},

bounce: false,

stopPropagation: true,

click: this.click || true

})

this.slide.on('scrollEnd', this._onScrollEnd)

this.slide.on('touchEnd', () => {

// if (this.autoPlay) {

this._play()

// }

})

this.slide.on('beforeScrollStart', () => {

// if (this.autoPlay) {

clearTimeout(this.timer)

// }

})

},

// 滚动到下一页

_play() {

clearTimeout(this.timer)

this.timer = setTimeout(() => {

this.slide.next()

}, 400)

},

_onScrollEnd() {

let pageIndex = this.slide.getCurrentPage().pageX

this.currentIndex = pageIndex

// if (this.autoPlay) {

this._play()

// }

}

}

}

.slide {

width: 100%;

// max-width: 6.4rem;

overflow: hidden;

position: relative;

ul {

list-style-type: none;

position: relative;

overflow: hidden;

li {

float: left;

img {

width: 100%;

}

}

}

.dot {

position: absolute;

text-align: center;

width: 100%;

top: 80%;

span {

display: inline-block;

width: 4px;

height: 4px;

background-color: #fff;

border-radius: 100%;

margin: 0 6px 0 0;

}

span.active {

background-color: red;

width: 14px;

border-radius: 4px;

}

}

}

.list-wrapper {

position: relative;

max-height: 3.5rem;

overflow: hidden;

li {

height: 0.5rem;

line-height: 0.5rem;

}

}

如果你想使用better-scroll封装slide等组件建议你先查看demo

Tips:better-scroll推出了2.x demo 是基于1.x的，2.x版本中各种组件上层使用更简洁，你应该使用的是1.x版本