better-scroll

官方文档

• https://ustbhuangyi.github.io/better-scroll
• https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/

---

1 入门demo 

https://github.com/yuanyu1997/vue-music/tree/master/test-demo/better-scroll/demo-simple

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

父组件: App.vue

<template>
  <div>
    <recommend>
      <div v-for="item in recommends">
        <img :src="item.imgUrl">
      </div>
    </recommend>
  </div>
</template>

import Recommend from './components/Recommend.vue'
export default {
  data() {
    return {
      // 轮播图Url
      recommends: []
    }
  },
  created() {
    this._getRecommend()
  }, methods: {
    // 获取轮播图Url
    _getRecommend() {
      this.recommends = [
        {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638931.jpg'},
        {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638960.jpg'},
        {imgUrl: 'https://img-blog.csdnimg.cn/20191202123638991.jpg'},
        {imgUrl: 'https://img-blog.csdnimg.cn/2019120212363924.jpg'},
        {imgUrl: 'https://img-blog.csdnimg.cn/20191202123635862.jpg'}]
    }
  },
  components: {
    Recommend
  }
}

子组件: Recommend.vue

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content" ref="content">
      <!--图片-->
      <slot></slot>
    </div>
  </div>
</template>

.wrapper
  min-height: 1px

  .content
    position: relative
    overflow: hidden
    white-space: nowrap

    .content-item
      float: left
      box-sizing: border-box
      overflow: hidden
      text-align: center

      img
        display: block
        width: 100%

import BScroll from 'better-scroll'

props: {
  // 是否循环播放
  loop: {
    type: Boolean,
    default: true
  }
}

mounted: function () {
  setTimeout(() => {
    this.setContentWidth()
    this.initWrapper()
  }, 20)
}

// 计算content的宽度
setContentWidth: function () {
  // 获取content里的所有的子元素
  this.children = this.$refs.content.children
  // 计算宽度  = 图片个数+每张图片的宽度
  let width = 0

  // wrapperWidth = width+左右padding
  let wrapperWidth = this.$refs.wrapper.clientWidth

  for (let i = 0; i < this.children.length; i++) {
    // 获取children里的每一项内容
    let child = this.children[i]
    // 增加一个class值contet-item
    addClass(child, 'content-item')
    child.style.width = wrapperWidth + 'px'
    width += wrapperWidth
  }
  if (this.loop) {
    width += 2 * wrapperWidth
  }
  this.$refs.content.style.width = width + 'px'
}

// 设置宽度以后初始化wrapper
initWrapper: function () {
  this.wrapper = new BScroll(this.$refs.wrapper, {
    // 横向滚动
    scrollX: true,
    // 纵向滚动
    scrollY: false,

    momentum: false,

    snap: true,
    // 是否循环轮播
    snapLoop: this.loop,
    snapThreshold: 0.3,
    snapSpeed: 400
  })
}

注意

/* !!!清除默认样式 */
body {
  margin: 0;
  padding: 0;
}

---

Vue.nextTick: https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列 

https://zhuanlan.zhihu.com/p/27407024 

<div id="test">
    <div ref='msg'>{{msg}}</div>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#test',
        data: {
            msg: '666'
        },
        mounted() {
            // this.$nextTick(() => {
            //     this.msg = Math.random() * 1000 | 0
            //     alert('this.$nextTick'+this.msg)
            // })
            //改变数据
            this.msg = '999'

            //想要立即使用更新后的DOM。这样不行，因为设置msg后DOM还没有更新
            console.log(this.$el.textContent) // 并不会得到'999'

            // 方式1
            // //这样可以，nextTick里面的代码会在DOM更新后执行
            // Vue.nextTick(() => {
            //     console.log(this.$el.textContent) //可以得到'999'
            // })

            //方式2
            setTimeout(() => {
                console.log(this.$el.textContent) //可以得到'999'
            }, 20)
        }
    })
</script>