Vue项目解决better-scroll无法滚动

1. better-scroll版本不合适

npm uninstall better-scroll
npm install better-scroll@1.8.1 --save

2. 未添加对应属性值(mouseWheel)

<script>
    import BScroll from 'better-scroll'

    export default {
        name: "Scoll",
        methods: {
            initScroll() {
                this.scroll = new BScroll(this.$refs.wrapper, {click: true, probeType: 3, mouseWheel: true});
            },
        },
        mounted() {
            this.initScroll();
        },
    }
</script>

3. 层级关系

被scroll包裹的组件中只能由一个div层级的内容, 否则用div包裹起来

<scroll :top="150" :new-song-list="newSongList">
  <div class="scroll-wrapper">
    <div>
      <!--  my-swiper  -->
      <my-swiper style="background-color: #F2F6FC;" :swiper-list="swiperList"></my-swiper>
      <!--  hot-song-list -->
      <new-song-list :new-song-list="newSongList"></new-song-list>
    </div>
  </div>
</scroll>

4. 示例

// recommend.vue
<template>
  <div class="recommend">
    <scroll :top="150" :new-song-list="newSongList">
      <div class="scroll-wrapper">
        <div>
          <!--  my-swiper  -->
          <my-swiper style="background-color: #F2F6FC;" :swiper-list="swiperList"></my-swiper>
          <!--  hot-song-list -->
          <new-song-list :new-song-list="newSongList"></new-song-list>
        </div>
      </div>
    </scroll>
  </div>
</template>

// MyScroll.vue
<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
    import BScroll from 'better-scroll'

    export default {
        name: "Scoll",
        props: {
            top: {
                type: Number,
                default: 0,
            },
            newSongList: {
                type: Array,
                required: true
            },
        },
        methods: {
            initScroll() {
                this.$refs.wrapper.style.top = this.top + "px";
                this.scroll = new BScroll(this.$refs.wrapper, {click: true, probeType: 3, mouseWheel: true});
            },
            refresh() {
                this.scroll && this.scroll.refresh();
            }
        },
        mounted() {
            this.initScroll();
        },
        watch: {
            newSongList() {
                this.$nextTick(() => {
                    this.refresh();
                })
            }
        }
    }
</script>

<style scoped>
  .wrapper {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>