vue2.0——项目开发_better-scroll 实现移动端滑动

better-scroll + vue2.0 实现移动端滑动——左右联动

效果：滑动右侧时，左侧也能有相应的变化；点击左侧时，右侧也能自动定位到相应的位置。

如下图所示界面，左侧为分栏，右侧为分栏详情。

滑动右边使左边联动的大概的思路：

　　　　　　1）要知道右侧的列表中，每一个分栏所占的高度，存进一个数组中。

　　　　　　2）实现左边联动，则必须要监控 “scroll”事件，获取其高度

　　　　　　3）将scroll 的高度与右侧分栏的高度进行比较，获得其 index 值

　　　　　　4）左侧的分类中，使与 index 相应的分栏高亮即可~

余留的问题：额，左侧怎么跟着一起滚动？应该还需要判断一下当前左侧栏中的scroll的位置，然后使之跟随变化，但是不同尺寸的手机，高度不一，怎么解决？？？我不知道……哈哈哈

点击左边时，右边实现自动定位的大概思路：

　　　　　　1）首先要使点击有效，因为 better-scroll将默认事件都阻止了

　　　　　　2）为左侧的分栏绑定点击事件，并获取 index ，然后使右边的相应 index 分类滚动就行了~so easy ….but!!!

　　　怎么下手？！！

1. 先实现滑动右边触发左边的功能：

做法：

　　（1）定义变量先~ 在data中加入一个 listHight: [] 数组；一个变量scrollY ： 0，用来装目前的scroll的y位置坐标

　　（2）在methods 中定义一个函数计算高度，此处还要用到一个知识点（如何获取 分类列表dom元素？）使用 this.$refs

　　　　使用 ref 为子组件指定一个索引 ID,我们先给要获取高度的那个元素取个