1.简介
iScroll是一个高性能,资源占用少,无依赖,多平台的javascript滚动插件。
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 提供一个监听滚动距离的方法给外界使用
学习笔记,版权Jonathan