赞
踩
npm i @vueuse/core --save
npm i @vue/composition-api --save
import { useScroll } from '@vueuse/core'
<!--需要滚动的容器-->
<div id="container" ref="container" class="container"></div>
<!--第一个参数el(需要滚动的容器)--> this.$nextTick(() => { const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container')) this.x = x this.y = y this.isScrolling = isScrolling this.arrivedState = arrivedState this.directions = directions }) <!-- x:用于记录上次滚动的scrollLeft的值, y:记录上次滚动的scrollTop的值, isScrolling: 表示是否正在滚动, arrivedState: {top/right/bottom/left}表示滚动条是否到达指定边界, directions: {top/right/bottom/left} 表示滚动条正在滚动的方向 -->
<!--第二个参数,可以设置偏移量offset(滚动条到达上下左右边界的一个偏移值,例如left设置为30, 则水平滚动条距离左边界30px时则认为到达了左边界)-->
const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { offset: { top: 0, bottom: 300, right: 30, left: 0 }})
<!--第二个参数,{behavior: smooth}设置平滑的滚动-->
const { x, y, isScrolling, arrivedState, directions } = useScroll(document.getElementById('container'), { behavior: 'smooth' })
自定义指令vScroll在@vueuse/components中
import { vScroll } from '@vueuse/components'
Vue.directive('scroll', vScroll)
<div id="container" ref="container" v-scroll="onScroll" class="container"></div>
onScroll({ x, y, isScrolling, arrivedState, directions }) {
this.x = x
this.y = y
this.isScrolling = isScrolling
this.arrivedState = arrivedState
this.directions = directions
}
1.滚动到底部,出现‘返回顶部’按钮
2.滚动到底部,加载新数据
3.其他
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。