一、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事件,如何获取字母表的指定位置并激活索引
背景:
1、绑定@touchstart事件,获取当前 点击的anchorIndex索引
2、计算 △pageY(偏移量)。@touchmove的pageY-currentPageY
3、计算△index(变化量),△index = △ pageY/domWidth
4、this.currentIndex = anchorIndex + △index
5、优化 即可实现对索引的@touchmove动态改变
获取this.$refs 获取dom 或者 组件,不能混为一谈
注:方法 apply 传参,不详。