BetterScroll——滚动插件使用

BetterScroll插件使用(vue)

实现更好的滚动效果及滚屏功能;

在基本布局完成后,不用设置css中overflow:scroll之类的滑动布局,直接new一个BS对象然后关联到要滑动区域的盒子,最后配置参数、调用API即可;

例.

在这里插入图片描述

分别实现以下效果:

1.左侧导航标签列表滑动,右侧详情列表滑动;

首先BS严格要求布局如下:

<div class="wrapper">
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM,但不会影响滚动 -->
</div>

接下来引入CDN或者在项目中下载npm install @better-scroll/core --save即可

然后,new BS对象

let wrapper1 = document.getElementById("left")
let wrapper2 = document.getElementById("right")
let bsLeft = new BScroll(wrapper1, {})
let bsRight = new BScroll(wrapper2, {})

这里便可以实现左右侧分别滑动,且滑动丝滑

2. 左侧点击标签,右侧相应滑动到对应位置(即点1,右侧滑到1;点2,右侧滑到2);

思路:(1)首先要配置click,因为BS默认取消了点击事件;(2)获取点击的标签指定内容;(3)根据指定内容使bsRignt部分滚动到指定位置(scrollToElement方法)

实现:

// 打开点击事件,通常后面{}对象用于配置
let bsLeft = new BScroll(wrapper1, { click })
// 获取点击标签的内容,通常用id(唯一),事先给右侧板块每一部分内容配置好id
//获取到每次点击的id后,便可以调用滚动到指定元素的API
this.bsRight.scrollToElement(wrapper2,300)
3. 右侧滑动,左侧高亮随即改变(即右侧控制左侧)

思路:(1)要获取每一次滑动的位置(即y坐标,y为BS内置属性,可以监听scoll获得)(2)要获取右边每一个内容板块的高度(offsetHeight);(3)计算每一个内容板块的轴区间;(4)判断当前y在哪一个范围即可确定当前滑到哪一板块;

// (1) 监听scroll
bsRight.on('scroll',({y})=>{
    y = Math.abs(y)
    for (let key of this.rangeArr) {
        if (y > key.min && y <= key.max) {
            this.liName = key.name
        }
    }
})

// 获取每一板块在y轴上起点(min)、终点(max)、id(name)
let total = 0
for (let key of this.goodsList) {
    let height = document.getElementById(key.name).offsetHeight
    this.rangeArr.push({
        min: total - 60,
        max: height + total,
        name: key.name
    })
    total += height
}

注意:在监听scoll之前要先 配置 好probeType属性,默认为0,即不派发scroll事件;
可能在newBS对象时DOM没有及时渲染,可以尝试包裹一个定时器解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值