微信小程序实现美团菜单


Posted in Javascript onJune 06, 2018

本文实例为大家分享了微信小程序实现美团菜单的具体代码,供大家参考,具体内容如下

微信小程序实现美团菜单

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,
 })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
JS获取页面窗口大小的代码解读
Dec 01 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
使用JS读取XML文件的方法
Nov 25 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
bootstrap-table组合表头的实现方法
Sep 07 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
详解express + mock让前后台并行开发
Jun 06 #Javascript
vue element项目引入icon图标的方法
Jun 06 #Javascript
vue脚手架搭建过程图解
Jun 06 #Javascript
vue左右侧联动滚动的实现代码
Jun 06 #Javascript
Express本地测试HTTPS的示例代码
Jun 06 #Javascript
微信小程序仿美团城市选择
Jun 06 #Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
用PHP实现递归循环每一个目录
2010/08/08 PHP
定义php常量的详解
2013/06/09 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
网上应用的一个不错common.js脚本
2007/08/08 Javascript
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
Jquery简单实现GridView行高亮的方法
2015/06/15 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Bootstrap CSS布局之列表
2016/12/15 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
JS 数组随机洗牌的实例代码
2018/09/12 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
Python中拆分字符串的操作方法
2019/07/23 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
python主线程与子线程的结束顺序实例解析
2019/12/17 Python
PyTorch实现更新部分网络,其他不更新
2019/12/31 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
行政监察建议书
2014/05/19 职场文书
市场营销策划方案
2014/06/11 职场文书
社会实践的活动方案
2014/08/22 职场文书
2016年度优秀辅导员事迹材料
2016/02/26 职场文书
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏