iScroll的相关使用

1.简介

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。

iScroll

2.使用

2.1 使用场景

网易音乐详情页，下拉滚动数据的时候，图片放大

• 默认状态
  
• 放大后的效果
  

2.2 使用

2.2.1 安装

npm install iscroll --save

2.2.2 代码实现

封装滚动组件

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

<script>
// iscroll-probe专业版本，可以监听滚动的位置等细节
import IScroll from 'iscroll/build/iscroll-probe'
export default {
  name: 'ScrollView',
  mounted () {
    this.iscroll = new IScroll(this.$refs.wrapper, {
      mouseWheel: true,
      scrollbars: false, // 是否显示滚动条
      probeType: 3, //  像素级的触发scroll事件
      // 解决拖拽卡顿问题
      scrollX: false,
      scrollY: true
      // disablePointer: true,
      // disableTouch: false,
      // disableMouse: true
    })
    // setTimeout(() => {
    //   //  数据是从网络上获取的，获取完需要重新计算滚动范围
    //   this.iscroll.refresh()
    // }, 5000)
    // 1.创建一个观察者对象
    /**
     * MutationObserver只要监听到指定内容发生变化，就会执行传入回调函数
     * mutationList：发生变化的数组
     * observer：观察者对象
     */
    var observer = new MutationObserver((mutationList, observer) => {
      console.log(mutationList)
      this.iscroll.refresh()
    })
    // 2.告诉观察者对象需要观察什么内容
    const config = {
      childList: true, // 观察目标子节点的变化，是否有添加或者删除
      subtree: true, // 观察后代节点，默认为 false
      attributeFilter: ['height', 'offsetHeight'] // 观察特定属性 子节点的高度
    }
    // 3.告诉观察者对象，我们需要观察谁，需要观察什么内容
    /**
     * 第一个参数：告诉观察者我们需要观察谁
     * 第二个参数：告诉观察者我们需要观察什么内容
     */
    observer.observe(this.$refs.wrapper, config)
  },
  methods: {
    // 提供一个监听滚动距离的方法给外界使用
    scrolling (Fn) {
      this.iscroll.on('scroll', function () {
        Fn(this.y) // 把当前偏移位给外界
      })
    }
  }
}
</script>

<style lang="scss" scoped>
#wrapper {
  width: 100%;
  height: 100%;
}
</style>

<template>
  <div class="detail">
    <SubHeader :title="playList.name"></SubHeader>
    <div class="detail-head-img">
      <DetailTop :path="playList.coverImgUrl" ref="top"></DetailTop>
    </div>
    <div class="bottom">
      <ScrollView ref="scrollview">
        <DetailBottom :playlist="playList.tracks"></DetailBottom>
      </ScrollView>
    </div>
  </div>
</template>

<script>
import SubHeader from '../components/SubHeader.vue'
import DetailTop from '../components/DetailTop.vue'
import DetailBottom from '../components/DetailBottom.vue'
import ScrollView from '../components/ScrollView.vue'
import { getPlayList } from '../api/index'
export default {
  name: '',
  components: {
    SubHeader,
    DetailTop,
    DetailBottom,
    ScrollView
  },
  data () {
    return {
      playList: {}
    }
  },
  created () {
    getPlayList({ id: this.$route.params.id })
      .then(data => {
        console.log('data', data)
        this.playList = data.playlist
      })
      .catch(err => {
        console.log(err)
      })
  },
  mounted () {
    const defaultHeight = this.$refs.top.$el.offsetHeight

    this.$refs.scrollview.scrolling((offsetY) => {
      console.log(offsetY)
      if (offsetY < 0) {
        console.log('向上滚动')
        const scale = 1 + Math.abs(offsetY) / defaultHeight
        this.$refs.top.$el.style.filter = `blur(${scale}px)`
      } else {
        console.log('向下滚动', this.$refs.top.$el.style)
        const scale = 1 + offsetY / defaultHeight
        this.$refs.top.$el.style.transform = `scale(${scale})`
      }
    })
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/css/mixin";
.detail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  @include bg_sub_color();
  .detail-head-img {
    // overflow: hidden;
  }
  .bottom {
    position: fixed;
    top: 500px;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

总结

根据 滚动的距离(y轴方向) / 图片的高度 的值，来设置图片放大的比例，scale为1时为原始大小，1+[滚动的距离(y轴方向) / 图片的高度 的值] 为放大的比例

iScroll 提供一个监听滚动距离的方法给外界使用

onScroll事件–options.probeType

---

学习笔记，版权Jonathan