Vue框架之goods组件开发详解(4)
2.我们获取到区间高度数组后,我们要实时获取到右侧的y值,和左侧的索引值做一个对比,定义一个scrollY变量用来存放实时获取的y值。bs插件为我们提供了一个实时获取y值的方法,我们在初始化this.foodScroll的时候加一个·属性probeType: 3,其作用就是实时获取y值,相当于探针的作用。
goods: [],// goods json 数组 listHeight: [],// 存放 foods 内部的每一块的高度 scrollY:0
this.foodScroll=new BScroll(this.$refs.foodsWrapper,{ click:true, //探针作用,实时监测滚动位置 probeType: 3 });
3.我们再添加一个方法this.foodScroll.on('scroll',(pos) => {}),作用是实时滚动的时候把获取到的位置给暴露出来。代码如下。
//结合BScroll的接口使用,监听scroll事件(实时派发的),并获取鼠标坐标,当滚动时能实时暴露出scroll this.foodScroll.on("scroll",(pos) =>{ // 回调函数 //scrollY接收变量 this.scrollY=Math.abs(Math.round(pos.y)) //滚动坐标会出现负的,并且是小数,所以需要处理一下,实时取得scrollY // console.log(pos.y) })
4.定义一个计算属性computed,获取到food滚动区域对应的menu区域的子块的索引i值,从而定位到左侧边栏的位置。
computed:{ currentIndex (){ //计算到达哪个区域的区间的时候的对应的索引值 // 利用 listHeight 存放 每一块 对应的高度 for (let i=0,l=this.listHeight.length; i<l ; i++){ let menuHeight_fir = this.listHeight[i] // 当前menu 子块区域的 高度 let menuHeight_sec = this.listHeight[i + 1] // 下一个menu 子块区域的 高度 // 当滑到底部时,menuHeight_sec 为 underfined, // 需要确定滑到俩个高度区间 if( !menuHeight_sec || (this.scrollY > menuHeight_fir && this.scrollY < menuHeight_sec) ){ return i; } } }, }
获取到i后,,然后通过设置一个class来做样式切换变化 :class="{'current':currentIndex === index}" ,当currentIndex和menu-item对应的index相等时,设置current的样式。这样就可以实现左右联动了。
<li v-for='(item,index) in goods' class="menu-item" :class="index === currentIndex?'menu-item-selected':'menu-item'"> ...
在样式里提前设好 选中和正常的样式
5.最后实现左侧点击的功能。在左侧的li下绑定一个selectMenu的点击事件,并传入索引值,这样我们就可以知道点击的是哪一个li
<li v-for='(item,index) in goods' class="menu-item" @click="selectMenu(index,$event)" :class="index === currentIndex?'menu-item-selected':'menu-item'"> ...
selectMenu (index, event){ // 点击左侧 ,右侧响应 this.foodScroll.scrollTo(0, -this.listHeight[index], 300) }
内容版权声明:除非注明,否则皆为本站原创文章。
转载注明出处:http://www.heiqu.com/87.html