微信小程序实现美团菜单


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 cookie中文乱码解决方法
Jan 28 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery插件expander实现图片翻转特效
May 21 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
JS实现鼠标滑过显示边框的菜单效果
Sep 21 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
小程序开发基础之view视图容器
Aug 21 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
在JavaScript中如何使用宏详解
May 06 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
php 字符转义 注意事项
2009/05/27 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php微信开发之自定义菜单实现
2016/11/18 PHP
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Python 装饰器深入理解
2017/03/16 Python
python实现排序算法解析
2018/09/08 Python
python机器学习库xgboost的使用
2020/01/20 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
Python函数基本使用原理详解
2020/03/19 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
html5 css3 动态气泡按钮实例演示
2012/12/02 HTML / CSS
应届生英语教师求职信
2013/11/05 职场文书
会计电算化专业求职信
2014/06/10 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书