微信小程序实现美团菜单


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 cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
JS获取图片lowsrc属性的方法
Apr 01 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
vue组件中的样式属性scoped实例详解
Oct 30 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
uni app仿微信顶部导航条功能
Sep 17 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
实现dedecms全站URL静态化改造的代码
2007/03/29 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
基于php验证码函数的使用示例
2013/05/03 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
百度留言本js 大家可以参考下
2009/10/13 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js获取url传值的方法
2015/12/18 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Bootstrap table使用方法记录
2017/08/23 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
urllib2自定义opener详解
2014/02/07 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
深入讲解Python中面向对象编程的相关知识
2015/05/25 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
Python类的动态绑定实现原理
2020/03/21 Python
Python字符串三种格式化输出
2020/09/17 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
群众路线个人自我剖析材料
2014/10/07 职场文书
政风行风评议心得体会
2014/10/21 职场文书
小学英语听课心得体会
2016/01/14 职场文书
HTML通过表单实现酒店筛选功能
2021/05/18 HTML / CSS