微信小程序实现美团菜单


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 相关文章推荐
js checkbox(复选框) 使用集锦
Apr 28 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
JS实现的文字与图片定时切换效果代码
Oct 06 Javascript
JavaScript中数据类型转换总结
Dec 25 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
Jun 04 Javascript
使用javascript做在线算法编程
May 25 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
详解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
php中iconv函数使用方法
2008/05/24 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
PHP防盗链代码实例
2014/08/27 PHP
PHP合并静态文件详解
2014/11/14 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
拖动时防止选中
2017/02/03 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
vue+elementui 对话框取消 表单验证重置示例
2019/10/29 Javascript
利用python获得时间的实例说明
2013/03/25 Python
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
浅析Python中的多条件排序实现
2016/06/07 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
浅述python中深浅拷贝原理
2018/09/18 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
python 实现两个线程交替执行
2020/05/02 Python
主题酒店策划书
2014/01/28 职场文书
自荐书范文范例
2014/02/13 职场文书
三分钟演讲稿范文
2014/04/24 职场文书
假面舞会策划方案
2014/05/29 职场文书
售后客服工作职责
2014/06/16 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
副总经理岗位职责
2015/02/02 职场文书
南京导游词
2015/02/03 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书