为什么better scroll轮播鼠标点击就会暂停？

Question

<template>
  <div class="home">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <div class="slide" ref="slide">
        <ul ref="ul">
            <li>
                <img src="../assets/slide-1.jpg" alt="">
            </li>
            <li>
                <img src="../assets/slide-2.jpg" alt="">
            </li>
            <li>
                <img src="../assets/slide-3.jpg" alt="">
            </li>
        </ul>
        <div class="dot">
            <span v-for="(item,index) in dots" :class="{active: currentIndex === index}"></span>
        </div>
    </div>
    <div ref="wrapper" class="list-wrapper">
        <ul class="list-content">
            <li v-for="item in data">{{item}}</li>
        </ul>
    </div>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'
import BScroll from 'better-scroll'

export default {
  name: 'home',
  created () {
      for (let i = 0; i < 100; i++) {
          this.data[i] = i;
      }
  },
  mounted () {
      setTimeout(() => {
          this.setSlideWidth();
          this.initSlide();
          this.play();
      },20)
  },
  data () {
      return {
          data: [],
          scroll: null,
          timer: '',
          dots: [1,2,3],
          currentIndex: 0,
      }
  },
  components: {
    HelloWorld
  },
  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 () {
          let options = {
              scrollX: true,
              scrollY: false,
              snap: {
                  loop: true,
                  threshold: 0.3,
                  speed: 400,
              }
          }

          this.slide = new BScroll(this.$refs.slide,options);

          this.slide.on('scrollEnd', () => {
              this.currentIndex = this.slide.getCurrentPage().pageX;
              clearTimeout(this.timer);
              this.play();
          })

          this.slide.on('beforeScrollStart', () => {
              clearTimeout(this.timer);
          })
      },
      // 滚动到下一页
      play(){
          clearTimeout(this.timer);
          this.timer = setTimeout(() => {
              this.slide.next();
          },2000)
      }
  }
}
</script>
<style scoped lang="less">
    .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;
        }
    }
</style>

为什么点击轮播的图片，轮播就会暂停
在手机上点一下屏幕，轮播也会暂停

Answer 1

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

<template>
  <div class="home">
    <div class="slide" ref="slide">
      <ul ref="ul">
        <li
          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']"
        >
          <img :src="item" alt />
        </li>
      </ul>
      <div class="dot">
        <span v-for="(item,index) in dots" :class="{active: currentIndex === index}"></span>
      </div>
    </div>
    <!-- <div ref="wrapper" class="list-wrapper">
      <ul class="list-content">
        <li v-for="item in data">{{item}}</li>
      </ul>
    </div>-->
  </div>
</template>

<script>
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()
      // }
    }
  }
}
</script>
<style scoped lang="less">
.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;
  }
}
</style>

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

---

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