微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能
这次给大家带来微信小程序做出外卖菜单点单功能,的注意事项有哪些,下面就是实战案例,一起来看一下。
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,
})
},
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
微信小程序左右菜单mysql_微信小程序做出外卖菜单点单功能相关推荐
- 微信小程序云开发 mysql_微信小程序云开发数据库
如在云开发数据库的基础介绍中所说,云开发提供了一个 JSON 数据库,本章将介绍以下内容: 上手:用控制台创建我的第一个集合,插入我的第一条数据 数据类型:了解数据库提供的数据类型 权限控制:控制集合 ...
- java的Gui菜单的描述_100分的外卖菜单描述怎么写?加上这些关键点,菜品看着就高端了...
原标题:100分的外卖菜单描述怎么写?加上这些关键点,菜品看着就高端了 常听到的一句话,细节决定成败.对于外卖商家来说,顾客愿意点你们家的外卖,绝不仅仅是因为你家的产品好,还可能因为你产品细节做到位了 ...
- 微信小程序怎么取mysql_微信小程序如何加载数据库真实数据?
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
- 微信小程序开发与mysql_微信小程序云开发之云数据库入门
微信小程序云开发之云数据库入门 介绍 开发者可以使用云开发开发微信小程序.小游戏,无需搭建服务器,即可使用云端能力. 其基础能力数据库,是一个JSON数据库,作用是无需自建数据库,就可以在微信小程序前 ...
- 微信小程序云开发 mysql_微信小程序云开发学习笔记(一)云数据库
云开发配置的环境:cloud-learning 云开发环境初始化准备 需要: APPID 操作: 在创建项目时,填入APPID并选择不使用云函数 进入到开发者页面,点击左上角的云开发并选择开通 设置云 ...
- 微信昵称保存不了mysql_微信昵称存储mysql失败解决办法
报错信息基本是这样的.原因就是 username字段需要用mysql中的 utf8mb4 编码,这个需要mysql 5.3之后才支持,如果不是5.3以上版本 需要升级. 1. 修改数据库/表/字段的编 ...
- 微信小程序 长按图片不出现菜单_微信更新,新功能上了热搜
微信在推出新功能方面相当克制,但每一次总能引起全网关注. 昨天,微信又因为一个小功能的改进再次上了热搜,在安卓最新的 7.0.17 版本当中,微信取消了两分钟内删除功能. 在新版微信中,发出的消息在两 ...
- 微信公众号自定义菜单跳转小程序
微信的小程序交给有赞开发,由微信手册,菜单跳小程序需要如下配置: ["type" => "miniprogram","name" =& ...
- java 微信公众号菜单,Java 微信公众号菜单关联小程序
最近微信公众号开发了菜单关联小程序功能,实现代码如下 /** * 自定义菜单工具类 * @author why * */ public class MenuUtil { private static ...
最新文章
- 网站开发常用jQuery插件总结(15)上传插件blueimp
- leetcode算法题--可获得的最大点数
- 本地数据源:使用firebird数据库
- hibernate和spring学习
- 你绝对能懂的“机器学习”(一)
- 为什么Netty这么火?与Mina相比有什么优势?
- 第十节:实现vue组件之间的通信
- 如何访问Server 2008R2的共享不输入密码
- MUI - 图片预览(perviewimage)的优化
- 【OpenGL】OpenGL GLUT扩展库安装与配置(Windows Visual Studio2008)
- 网页英文 错位_网页错位原因解决方法
- 形容词和副词(专升本语法)
- matlab绘制vti群速度,VTI介质中P波相速度与群速度的比较
- 计算机设备与驱动器空白图标,这个方法帮你删掉win10设备和驱动器里无效图标...
- 学测试,看视频?NONONO,除非这种情况
- kui 组件化库思路(来啦,老弟,持续更新哦,部署gitpages,添加issue)
- seo单页html模板,竞价单页模板设计思路
- 注册一个域名需要多少钱_注册一个新的域名需要多少钱 注册域名费用明细
- 半加器设计(结构描述法)
- 休眠后电脑马上自动唤醒解决