vue中scroll 的使用
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。常用效果:移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。npm install better-scroll --saveimport ...
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题。
常用效果:移动端很常见的效果,当滑动右边部分的时候,左边会联动显示与当前内容相符合的标题高亮,当点击左边某一个标题的时候,右边会自动滑动到相应的内容。
npm install better-scroll --save
import BScroll from 'better-scroll'
注意使用better-scroll的基本条件
- 必须包含两个大的div,外层和内层div
- 外层div设置可视的大小(宽或者高)-有限制宽或高
- 内层div,包裹整个可以滚动的部分
- 内层div高度一定大于外层div的宽或高,才能滚动
//创建一个新实例 并且 对class为wrapper对象 实现了一个纵向可点击的滚动效果
let scroll = new BScroll('.wrapper',{
scrollY: true,
click: true
})
实现及说明
1.滚动效果
better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例,初始化的时候,先要获取需要滑动的元素,然后在初始化的时候将获取到的元素传递给初始化函数,此时便可实现滑动效果
2.左右联动效果
左右联动效果的实现,是better-scroll通过监听事件实现的。
首先获取到右边内容盒子的高度,然后获取到该盒子中每一项的高度并做前n项高度累加(第n项的高度是前n项的高度和)存储到listHeight数组中。在初始化的时候传递属性probeType=3 (探针的效果,时时获取滚动高度),并给右边的内容盒子对象监听scroll事件,从而时时获取Y轴位置,来与listHeight数组中的数据做比较,时时计算当前的索引值,并给对边对应索引值的项添加背景色高亮,从而实现右边滑动,联动左边。
当点击左边的每一项的时候,获取到当前的索引值,并根据当前的索引值获取到与右边内容盒子中对应索引的元素,右边的盒子元素通过监听scrollToElement,并传递获取到的对应索引元素和动画时间,从而实现点击左边,实现右边联动;
probeType
- 类型:Number
- 默认值:0
- 可选值:1、2、3
- 作用:有时候我们需要知道滚动的位置。当 probeType 为 1 的时候,会非实时(屏幕滑动超过一定时间后)派发scroll 事件;当 probeType 为 2 的时候,会在屏幕滑动的过程中实时的派发 scroll 事件;当 probeType 为 3 的时候,不仅在屏幕滑动的过程中,而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
<template>
<div class="scroll" ref='wrapper'>
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'scroll',
props:{
//纵向滚动
scrollY: {
type: Boolean,
default: true
},
//横向滚动
scrollX:{
type: Boolean,
default: false
},
click:{
type: Boolean,
default: true
},
//探针
probeType: {
type: Number,
default: 0
}
},
//挂载后
mounted(){
let wrapper = this.$refs.wrapper
this.scroll = new BScroll(wrapper,{
scrollX:this.scrollX,
scrollY:this.scrollY,
click: this.click,
probeType: this.probeType
})
//console.log('scroll', this.scroll)
// //监听滚动事件
this.scroll.on('scroll',position => {
//scroll组件不关心你要干嘛,只需要把你想要的信心给你,也就是派发scroll事件,如果你想获取实时的滚动位置你来监听这个事件即可,position就是实时滚动的位置,是个对象,{x: 0 ,y: 0} y是个负值
this.$emit('scroll',position)
})
},
methods:{
// //滚动到指定元素
scrollToElement(...args) {
this.scroll && this.scroll.scrollToElement(...args)
},
//滚动到相应的位置
scrollTo(...args){
this.scroll&&this.scrollTo(...args)
},
//刷新
refresh(){
this.scroll&&this.scroll.refresh()
},
//禁用
disable(){
this.scroll&&this.scroll.disable()
},
//启用
enble(){
this.scroll&&this.scroll.enable()
}
}
}
</script>
<style>
.scroll{
overflow:hidden;
}
</style>
在组件中如要用到scroll,就引入.
如: import scroll from '../../base/scroll/scroll'
再在定义:components:{
srcoll
}
<scroll>
<div class= 'bigBox'> 有固定的高度
<div class=" box"> box的高度一定要高于外边的父级盒子,才能实现滚动
</div>
</div>
</scroll>
例如:
更多推荐
所有评论(0)