pfhwyigou/mobile/web/overseas/js/videolist/dist/mescroll.vue

<template>
  <div ref="mescroll" class="mescroll">
    <div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 引入mescroll.min.js和mescroll.min.css
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'

export default {
  name: 'MeScrollVue',
  data: function () {
    return {
      mescroll: null,
      lastScrollTop: 0, // 路由切换时滚动条的位置
      lastBounce: null // 路由切换时是否禁止ios回弹
    }
  },
  props: {
    up: Object,
    down: Object
  },
  mounted: function () {
    this.mescroll = new MeScroll(this.$refs.mescroll, {
      up: this.up,
      down: this.down
    })
    this.$emit('init', this.mescroll) // init回调mescroll对象
  },
  methods: {
    beforeRouteEnter () {
      if (this.mescroll) {
        // 滚动到之前列表的位置
        if (this.lastScrollTop) {
          this.mescroll.setScrollTop(this.lastScrollTop)
          setTimeout(() => { // 需延时,因为setScrollTop内部会触发onScroll,可能会渐显回到顶部按钮
            this.mescroll.setTopBtnFadeDuration(0) // 设置回到顶部按钮显示时无渐显动画
          }, 16)
        }
        // 恢复到之前设置的isBounce状态
        if (this.lastBounce != null) this.mescroll.setBounce(this.lastBounce)
      }
    },
    beforeRouteLeave () {
      if (this.mescroll) {
        this.lastScrollTop = this.mescroll.getScrollTop() // 记录当前滚动条的位置
        this.mescroll.hideTopBtn(0) // 隐藏回到顶部按钮,无渐隐动画
        this.lastBounce = this.mescroll.optUp.isBounce // 记录当前是否禁止ios回弹
        this.mescroll.setBounce(true) // 允许bounce
      }
    }
  }
}
</script>

<style>
</style>