本文实例为大家分享了微信小程序实现美团菜单的具体代码,供大家参考,具体内容如下
1。功能仅是菜单功能一部分,仅供参考
2。需求描述:右侧菜品部分在滚动的时候,左侧菜品选中分类与右侧第一行菜品所在分类对应。
我的实现方式:(每个菜品高度*该分类菜品数量)+菜品分类高度=x,每次滚动的时候判断当前scrollTop是否在x范围内?左侧选中该分类:左侧不做改变;
问题:我设置菜品高度的单位是rpx,而scrollTop的单位是px,这也就是说,上面我计算的x是个变量,所以当改变测试机型,这个功能就失效了…请教各位有什么好的方法没?
onLoad (e) {
让goodsList=this.data.goodsList;//初始化每项菜品距离顶部的距离
(让我=0;我& lt;goodsList.length;我+ +){
如果(我!=0)
goodsList[我]。scrollTop=方法(goodsList [i - 1] .scrollTop) +方法(goodsList [i - 1]。好。长度* 90)+ 35)
}
this.data。goodsList=goodsList;
}，//右侧滚动事件
onGoodsScroll:函数(e) {
让=这个;//当前滚动部分距离页面顶部距离
让scrollTop=方法(e.detail.scrollTop);
让goodsList=that.data.goodsList;
(让我=0;我& lt;goodsList.length;我+ +){
让currentScrollTop=goodsList[我].scrollTop;
让nextScrollTop=0;
如果((i + 1)==goodsList.length)
nextScrollTop=goodsList[我].scrollTop;
其他的
nextScrollTop=goodsList .scrollTop (i + 1);
如果(currentScrollTop & lt;scrollTop,,scrollTop & lt;nextScrollTop) {
that.setData ({
classifyIdLeft: goodsList[我].id,
classifySeleted: goodsList[我].id
}）
}
}
}
关于上面提到的问题,解决方法如下,但是具体参数没搞明白怎么回事,而且定位也不是很准,请求各位有什么好方法。
//右侧滚动事件
onGoodsScroll:函数(e) {
让=这个;
让规模=e.detail.scrollWidth/600;
让scrollTop=e.detail.scrollTop/规模;
让h=0;
让classifySeleted;
让len=that.data.goodsList.length;
that.data.goodsList。forEach(函数(分类,我){
var _h=70 + classify.goods。长度* 180;
如果(scrollTop祝辞=h - 100/规模){
classifySeleted=classify.id;
}
h +=_h;
}）;
that.setData ({
classifySeleted: classifySeleted,
classifyIdLeft: classifySeleted,
}）
},
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
