### [微信小程序做出外卖菜单点单功能](https://www.prosaas.cn/article/17487)

**Published:** 2018-06-07T01:38:21

**Author:** 5201314

**Excerpt:** 这次给大家带来微信小程序做出外卖菜单点单功能，的注意事项有哪些，下面就是实战案例，一起来看一下。1.功能仅是菜…

这次给大家带来微信小程序做出外卖菜单点单功能，的注意事项有哪些，下面就是实战案例，一起来看一下。

![](https://img.php.cn/upload/article/000/000/002/be9ed548f692e7193cf1564d850c8949-0.gif)

1.功能仅是菜单功能一部分，仅供参考

2.需求描述：右侧菜品部分在滚动的时候，左侧菜品选中分类与右侧第一行菜品所在分类对应。

我的实现方式：（每个菜品高度\*该分类菜品数量）+菜品分类高度 = x， 每次滚动的时候判断当前scrollTop是否在x范围内？左侧选中该分类：左侧不做改变；  
问题：我设置菜品高度的单位是rpx，而scrollTop的单位是px，这也就是说，上面我计算的x是个变量， 所以当改变测试机型，这个功能就失效了。。。请教各位有什么好的方法没？

onLoad(e) {
 let goodsList = this.data.goodsList;
 // 初始化每项菜品距离顶部的距离
 for (let i = 0; i < goodsList.length; i++) {
 if (i != 0)
 goodsList\[i\].scrollTop = parseInt(goodsList\[i - 1\].scrollTop) + parseInt((goodsList\[i - 1\].goods.length \* 90) + 35)
 }
 this.data.goodsList = goodsList;
},
// 右侧滚动事件
onGoodsScroll: function (e) {
 let that = this;
 // 当前滚动部分距离页面顶部距离
 let scrollTop = parseInt(e.detail.scrollTop);
 let goodsList = that.data.goodsList;
 for (let i = 0; i < goodsList.length; i++) {
 let currentScrollTop = goodsList\[i\].scrollTop;
 let nextScrollTop = 0;
 if ((i + 1) == goodsList.length)
 nextScrollTop = goodsList\[i\].scrollTop;
 else
 nextScrollTop = goodsList\[i + 1\].scrollTop;
 if (currentScrollTop < scrollTop && scrollTop < nextScrollTop) {
 that.setData({
 classifyIdLeft: goodsList\[i\].id,
 classifySeleted: goodsList\[i\].id
 })
 }
 }
}

关于上面提到的问题2，解决方法如下，但是具体参数没搞明白怎么回事，而且定位也不是很准，请求各位有什么好方法。

// 右侧滚动事件
 onGoodsScroll: function (e) {
 let that = this;
 let scale = e.detail.scrollWidth / 600;
 let scrollTop = e.detail.scrollTop / scale;
 let h = 0;
 let classifySeleted;
 let len = that.data.goodsList.length;
 that.data.goodsList.forEach(function (classify, i) {
 var \_h = 70 + classify.goods.length \* 180;
 if (scrollTop >= h - 100 / scale) {
 classifySeleted = classify.id;
 }
 h += \_h;
 });
 that.setData({
 classifySeleted: classifySeleted,
 classifyIdLeft: classifySeleted,
 })
 },

相信看了本文案例你已经掌握了方法，更多精彩请关注知企PROSAAS其它相关文章！

推荐阅读：

Angularjs自定义指令在项目中如何使用

怎样使用nodeJS模块

以上就是微信小程序做出外卖菜单点单功能的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---