Vue中使用滚动组件iscroll

首先安装iscroll

npm install iscroll

创建scroll组件

<template>
  <div id="wrapper" ref="wrapper">
    <slot></slot>
  </div>
</template>

<script>
import IScroll from 'iscroll/build/iscroll-probe' //专业版本可以监听滚动的细节
export default {
  name: 'ScrollView',
  mounted () {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      mouseWheel: true,//禁用鼠标滚轮
      scrollbars: true, //禁用滚动条
      // 解决拖拽卡顿问题
      scrollX: false,
      scrollY: true, //y方向滚动
      disablePointer: true,
      disableTouch: false,
      disableMouse: true
    })
    // setTimeout(() => {
    //   // console.log(this.iscroll.maxScrollY)
    //   this.iscroll.refresh()
    //   // console.log(this.iscroll.maxScrollY)
    // }, 5000)
    // 1.创建一个观察者的对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化,就会执行传入的回调函数
    MutationList: 发生变化的数组
    observer:观察者对象
     */
    const observer = new MutationObserver((mutationList, observer) => {
      // console.log(MutationList)
      // console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    // 2.告诉观察者对象我们需要观察什么内容
    const config = {
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      subtree: true, // 观察后代节点，默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性
    }
    // 3.告诉观察者对象,我们需要观察谁,需要观察什么内容
    /*
    第一个参数: 告诉观察者对象我们需要观察谁
    第二个参数: 告诉观察者对象我们需要观察什么内容
     */
    observer.observe(this.$refs.wrapper, config)
  }
}
</script>

<style scoped>
  #wrapper{
    width: 100%; //容器的宽高等于可视区域的宽高
    height: 100%;
  }
</style>

要注意把系统默认滚动关闭

html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;
  // 解决IScroll拖拽卡顿问题 
  touch-action: none; 
}

并且iscroll容器的高度必须小于内容的高度
容器的宽高等于可视区域的宽高
要给容器设置一个宽高,可以固定定位

.recommend{
  position: fixed;
  top: 184px;
  left: 0;
  right: 0;
  bottom: 0;
}

MutationObserver()
创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。

// 1.创建一个观察者的对象
    /*
    MutationObserver构造函数只要监听到了指定内容发生了变化,就会执行传入的回调函数
    MutationList: 发生变化的数组
    observer:观察者对象
     */
    const observer = new MutationObserver((mutationList, observer) => {
      // console.log(MutationList)
      // console.log(this.iscroll.maxScrollY)
      this.iscroll.refresh()
      // console.log(this.iscroll.maxScrollY)
    })
    // 2.告诉观察者对象我们需要观察什么内容
    const config = {
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      subtree: true, // 观察后代节点，默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性
    }
    // 3.告诉观察者对象,我们需要观察谁,需要观察什么内容
    /*
    第一个参数: 告诉观察者对象我们需要观察谁
    第二个参数: 告诉观察者对象我们需要观察什么内容
     */
    observer.observe(this.$refs.wrapper, config)

在使用iscroll的时候会遇到在PC端项目的点击事件是可以实现的，在chrome模拟器上也可以实现点击效果，但是到了真机上，点击事件就触发不了了，查阅资料得知是插件阻止了浏览器的click事件。

解决方法：
将iscroll里的option.click的默认值false改为true。这样移动端就可以支持点击事件了
在很多的插件中都会有阻止默认行为的设置，但是一般会有相应的参数可以设置来手动修改

this.iscroll = new IScroll(this.$refs.wrapper, {
      moiseWheel: true,
      scrollbars: false,
      // 解决卡顿
      scrollX: false,
      scrollY: true,
      disablePointer: true,
      disableTouch: false,
      disableMouse: true,
      click:true,//添加点击事件
      taps:true
    })