better-scroll在vue项目中使用以及部分问题解决如在pc端鼠标滚轮无法滚动问题

better-scroll

better-scroll的GitHub地址: https://github.com/ustbhuangyi/better-scroll

安装

npm install better-scroll -S

使用

dom结构, 这个就是一个ul标签 列表结构

	注意这个div的class名为 cinema 等会要把 better-scroll `挂载`到这个dom上
    <div class="cinema">
      <ul class="cinema-list">
        <li v-for="data in cinemas" :key="data.cinemaId">
          <div>{{ data.name }}</div>
          <div class="cinema-address">{{ data.address }}</div>
        </li>
      </ul>
    </div>

实例一个better-scroll对象,并挂在dom上

        new BetterScroll('.cinema',{
		})

pc端鼠标滚轮无法滚动问题

加上属性 mouseWheel: true

        new BetterScroll('.cinema',{
        	mouseWheel: true
		})

---

在vue中使用better-scroll时要注意, 因为vue是状态立即更新, dom是异步渲染的, 所以要使用 this.$nextTick,等到dom结构渲染完成在实例 BetterScroll对象

实际项目代码

<template>
    <div class="cinema" :style="{height:height}">
      <ul class="cinema-list">
        <li v-for="data in cinemas" :key="data.cinemaId">
          <div>{{ data.name }}</div>
          <div class="cinema-address">{{ data.address }}</div>
        </li>
      </ul>
    </div>
</template>

<script>
import http from '@/util/http'
import BetterScroll from 'better-scroll'

export default {
  data () {
    return {
      cinemas: [],
      height: 0
    }
  },
  mounted () {
    // 动态获取影院列表所占用的高度, 方便 BetterScroll 的滚动条显示正确的位置
    this.height = document.documentElement.clientHeight - 50 + 'px'
    http({
      url: '/gateway?cityId=310100&ticketFlag=1&k=4902196',
      headers: {
        'X-Host': 'mall.film-ticket.cinema.list'
      }
    }).then(res => {
      this.cinemas = res.data.data.cinemas
      ********************高亮线-没有用的线只为显眼****************************
      // 状态立即更改, 但是dom异步渲染
      this.$nextTick(() => {
        new BetterScroll('.cinema', {
          mouseWheel: true, // 解决better-scroll在PC端使用，鼠标无法实现滚动的解决
          scrollbar: { // 滚动条, 要加相对位置
            fade: true
          }
        })
      })
    })
  }
}
</script>
<style lang="scss" scoped>
  .cinema{
    overflow: hidden;  // 溢出隐藏
    position: relative; // 相对定位, 为了修正滚动条
  }
</style>