4.30better-scroll与 js原生Scroll 封装组件调用的区别

一、better-scroll/原生Scroll 如何使页面滚动的

better-scroll//Scroll 均需要,且通过两层div生效,A层绑定父容器(视口固定),B层(无限延长)的子容器,才能实现滚动。

二、两者如何监测滚动条距顶部距离

1、better-scroll。提前设置on方法(配置参数probetype设置节流非节流)
在这里插入图片描述
实现复用this.$emit(‘scroll’, pos)向父组件派发事件。
在父组件内进行方法操作。
在这里插入图片描述

2、原生Scroll可以对A层(父容器)绑定函数@scroll.passive=“handleScroll”,监听滚动条位置。如下
在这里插入图片描述
实现复用的话,可以this.$emit(‘onScroll’, offsetY)向父组件派发事件

三、两者如何实现跳转视口内的指定dom

1、 better-scroll 通过scrollToElement(this.$refs.dom)即可
2、scroll,遍历dom节点,累加获取offsetHeight的值,即通过scrollTo(x, y)跳转到指定scrollTop处。(即dom开始的位置) 。

四、扩展:@touchmove事件,如何获取字母表的指定位置并激活索引

背景:
z
1、绑定@touchstart事件,获取当前 点击的anchorIndex索引
2、计算 △pageY(偏移量)。@touchmove的pageY-currentPageY
3、计算△index(变化量),△index = △ pageY/domWidth
4、this.currentIndex = anchorIndex + △index
5、优化 即可实现对索引的@touchmove动态改变

获取this.$refs 获取dom 或者 组件,不能混为一谈

注:方法 apply 传参,不详。
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_40196738/article/details/89704801
今日推荐