bscroll左右联动

移动端很常见的效果，当滑动右边部分的时候，左边会联动显示与当前内容相符合的标题高亮，当点击左边某一个标题的时候，右边会自动滑动到相应的内容。

项目如下图：

实现及说明

1.滚动效果

better-scroll在使用的时候需要在dom元素渲染完成之后初始化better-scroll的实例，初始化的时候，先要获取需要滑动的元素，然后在初始化的时候将获取到的元素传递给初始化函数，此时便可实现滑动效果

2.左右联动效果

左右联动效果的实现，是better-scroll通过监听事件实现的。

首先获取到右边内容盒子的高度，然后获取到该盒子中每一项的高度并做前n项高度累加（第n项的高度是前n项的高度和）存储到listHeight数组中。在初始化的时候传递属性probeType=3 （探针的效果，时时获取滚动高度），并给右边的内容盒子对象监听scroll事件，从而时时获取Y轴位置，来与listHeight数组中的数据做比较，时时计算当前的索引值，并给对边对应索引值的项添加背景色高亮，从而实现右边滑动，联动左边。

当点击左边的每一项的时候，获取到当前的索引值，并根据当前的索引值获取到与右边内容盒子中对应索引的元素，右边的盒子元素通过监听scrollToElement，并传递获取到的对应索引元素和动画时间，从而实现点击左边，实现右边联动；

实现代码如下：

<div class="content">
    <div class="left" ref="left">
	<ul>
	     <li v-for="(item, index) in left" :key="item" :class="{current: currentIndex == index}" @click="selectItem(index, $event)">
		  <span class="left-item">{{item}}</span>
	     </li>
	</ul>
    </div>
    <div class="right" ref="right">
	<ul>
	     <li class="right-item right-item-hook" v-for="item in right" :key="item.name">
		  <h2>{{item.name}}</h2>
		  <ul>
		        <li v-for="num in item.content" :key="num.name">
			      <div>{{item.name+num}}</div>
			</li>
		  </ul>
	     </li>
	</ul>
     </div>
 </div>

<script>
import BScroll from "../../../lib/utils/bscroll.js"
export default {
	data () {
	    return {
	        left: ['a', 'b', 'c'],
	        right: [
				{
				    name: 'a',
				    content: ['1', '2', '3', '4', '5']
				},
				{
				    name: 'b',
				    content: ['1', '2', '3', '4', '5']
				},
				{
				    name: 'c',
				    content: ['1', '2', '3', '4', '5']
				},
	        ],
	        listHeight: [],
	        scrollY: 0, //实时获取当前y轴的高度
			currentIndex:0,
	    }
	},
	methods: {
	    _initScroll () {
			var that=this;
	        this.lefts = new BScroll(this.$refs.left, {
	            click: true
	        })
	        this.rights = new BScroll(this.$refs.right, {
	            probeType: 3 
	        })
	        this.rights.on('scroll', (pos) => {
	            this.scrollY = Math.abs(Math.round(pos.y));
				that.getCurIndex();
	            })
	        },
	    _getHeight () {
	        let rightItems = this.$refs.right.getElementsByClassName('right-item-hook')
	        let height = 0
	        this.listHeight.push(height)
	        for(let i = 0; i < rightItems.length; i++){
	            height += rightItems[i].clientHeight
	            this.listHeight.push(height)
	        }
	    },
	    selectItem(index,event){
			let rightItems = this.$refs.right.getElementsByClassName('right-item-hook');
			let el = rightItems[index];
			this.rights.scrollToElement(el, 300);
	    },
		getCurIndex () {
		    for(let i = 0; i < this.listHeight.length; i ++){
				let lastScroll=this.listHeight[this.listHeight.length - 1]-this.$refs.right.clientHeight;
				if(lastScroll-20<=this.scrollY){
					this.currentIndex=this.listHeight.length - 2;
					return;
				}
		        let height = this.listHeight[i]
		        let height2 = this.listHeight[i + 1]
		        if(!height2 || (this.scrollY >= height && this.scrollY < height2)){
		            this.currentIndex=i;
					return;
		        }      
		    }
		}
	},
	mounted () {
	    this.$nextTick(() => {
	        this._initScroll()
	        this._getHeight()
	    })
	},
}
</script>

参照原文：https://blog.csdn.net/mm_hello11/article/details/89048147

文章中效果滑动到底部不能显示正常，因为computed里dom操作，在挂载时执行，此时还没渲染完成。

对该文章的js部分进行了修改

很赞哦！ (0)