微信小程序实现美团菜单


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实现的检测浏览器和系统的函数
Apr 09 Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
浅谈jquery事件处理
Apr 24 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
js鼠标移动时禁止选中文字
Feb 19 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
微信小程序自定义轮播图
Nov 04 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
新老版本juqery获取radio对象的方法
2010/03/01 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
详解Bootstrap插件
2016/04/25 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
JavaScript用JSONP跨域请求数据实例详解
2017/01/06 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
html中创建并调用vue组件的几种方法汇总
2020/11/17 Javascript
python中学习K-Means和图片压缩
2017/11/20 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
浅析Python3 pip换源问题
2020/01/06 Python
聊聊Python pandas 中loc函数的使用,及跟iloc的区别说明
2021/03/03 Python
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
《得道多助,失道寡助》教学反思
2014/04/19 职场文书
监察建议书格式
2014/05/19 职场文书
2014年德育工作总结
2014/11/20 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
《观潮》教学反思
2016/02/17 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书