A.计算分类的区间高度
methods:{
calulateHeight(){
1.第一步要先拿到每一个li分类--给li取一个class别名 food-list-hook
2.通过calulateHeight方法获取到li元素
let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
console.log(foodlist) //控制台输出
3.把所有li元素的可视高度进行一个累加，放进一个数组里，ps：没有数组，需要在data里定义一个空数组listHeight:[]
4.定义一个height，最顶部的位置，为0
let height = 0
5.把当前的位置高度push进刚刚定义的数组里去
this.listHeight.push(height)
6.然后需要遍历一下刚刚拿到的li元素，即：foodlist
for(let i=0;i
//拿到每一个li元素
let item= foodlist[i]
//把每一个li元素的可视高度进行一个累加 即:clientHeight
height+= item.clientHeight
//这个时候把每一个li的可视高度都放进listHeight数组里
this.listHeight.push(height)
}
console.log(this.listHeight) //这时候如果姿势对的话,会打印出所有li的可视高度
},
//该方法是实现滑动的方法,具体可点击查看 better-scroll插件实现滑动
initScroll(){
this.menuScroll= new BScroll(this.$refs.menuScroll)
this.foodScroll= new BScroll(this.$refs.foodScroll,{
probeType:3 //必须指定probeType为3时，才会派发scroll事件
})
B.1 //foodScroll 添加监听事件on
this.foodScroll.on("scroll",(pos)=>{
console.log(pos.y) //会打印出y轴坐标，会出现负数以及小数
B.2 //在data内定义一个初始值 scrollY：0 ps：y轴滚动的高度
B.3 //对得到的pos.y 进行取绝对值Math.abs和取整数Math.round,并赋与scrollY
this.scrollY = Math.abs(Math.round(pos.y))
console.log(this.scrollY) //姿势正确的话会得到整数 和 正数
})
}
}
A.1:调用calulateHeight方法
//DOM已经更新,在调用calulateHeight方法才会得到正常的数值
//这里需要重新进行一次ajax请求，否则会出现一个无法描述的小bug
axios.get("接口").then((res)=>{
this.xxx=res.data
this.$nextTick(()=>{
this.calulateHeight()
})
})
B.监听滚动的位置
ps：此方法隶属于better-scroll插件 scroll事件 必须指定probeType为3时，才会派发scroll事件
C.我们既然可以拿到scrollY滚动的值，之后呢，我们就可以去通过计算属性，然后呢遍历一下我们刚刚获取到的listHeight的这个数组里面的所有的区间 ，在使用区间跟我们刚刚获取到的这个scrollY滚动的值做对比，如果当前的区间在这个里面的话，那我们就会生成一个 对应的下标，所以在计算属性里做文章，请移步 computed
computed:{
//计算listHeight的下标值 只要他的下标值和分类列表的下标值一致的话，那个分类就有一个对应选中的样式
currentIndex(){
//拿到listHeight具体的下标，先遍历listHeight
for(let i=0;i
//获取商品区间的范围 ps:商品区间就是相邻两个商品的之间的高度
//定义商品1,它的高度为height1
let height1 = this.listHeight[i]
//定义商品2,它的高度为height2
let height2 = this.listHeight[i+1]
//是否在上述区间中 ps:用滚动的值scrollY和height1,height2做对比,如果scrollY大于等于height1并且小于height2,就说明 i 在该区间内了,然后就把i返回,即得到下标
if(!height2 || (this.scroll >= height1&& this.scroll
return i;
console.log(i)//会打印出下标值 i 0,1,2,3,4,5,6,7...
}
}
return0; //return0 要放在for循环外,否则就会每次都会得到一个0
}
}
D: 给左侧分类列表绑定一个class类 current //名字可以随便取,这是当前选中的样式类名
:class="{'current':currentIndex === index}"
//currentIndex=== index 也就是i===index ,意思就是listheight的下标===index
E: 在style里给class类 current 配置样式
.current{
background:#fff;
font-weight:bold;
margin-top:-1px;
}
-------------------------------------------------------华丽的分割线------------------------------------------------------------------
实现点击左侧,右侧实时滚动
1.给分类列表 绑定一个@click事件,并把index值传递过去
分类列表 @click="selectMenu(index)"
2.在methods内添加selectMenu方法
methods:{
selectMenu(index){
//这里的index 是接收selectMenu事件传递过来的下标值,所以说这里的index也就是分类列表的下标值
console.log(index)//会得到下标值
//这里的下标值和右边的listheight的下标值对应上
//首先先获取右侧的元素 foodlist
let foodlist= this.$refs.foodScroll.getElementsByClassName("food-list-hook")
//获取到具体的元素,意识是第i个foodlist
let element= foodlist[index] //为什么不是i呢 这里没有i,i 和index相等
console.log(element) //点击哪个分类就会得到对应的foodlist
//滚动到对应的元素的位置 调用better-scroll提供的一个方法 scrollToElement(详情请自行百度)
this.foodScroll.scrollToElement(element,250) //250是滚动所花费的时间
}
}