小程序仿饿了么点餐界面

//index.js //获取应用实例 const app = getApp() Page({ data: { noticesCurrent: '0',//notice swiper index windowScrollHeight: null,//产品scroll的高度 leftToView: null,//左侧菜单scroll定位 rightToView: null,//右侧产品scroll定位 leftScrollClick: false,//左侧产品点击状态 用来做全局锁定，当点击左侧菜单出发右侧scroll-into-view,禁止右侧scroll事件重复处理造成的异常 currentCateno: '',//当前所在菜单 cartData: [],//购物车信息 cartContentShow: false,//购物车内容显示 motto: 'Hello World', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), imgUrls: [ { sid: 1, src: '/lib/style/images/1.jpg' }, { sid: 2, src: '/lib/style/images/2.jpg' }, { sid: 3, src: '/lib/style/images/3.jpg' } ], notices: [ { sid: 1, title: '系统维护通知', content: '系统维护通知的内容' }, { sid: 2, title: '订单结算规则的临时通知', content: '订单结算规则的临时通知的内容' }, { sid: 3, title: '新品即将来袭，你准备好了吗？', content: '新品即将来袭，你准备好了吗？的内容' } ], cates: [ { cateno: 'A1', title: '盒装沙拉1', goods: [{ goodsno: 'G1', title: '产品1_1', price: '28' }, { goodsno: 'G2', title: '产品1_2', price: '28' }] }, { cateno: 'A2', title: '外卖沙拉2', goods: [{ goodsno: 'G3', title: '产品1_1', price: '28' }, { goodsno: 'G4', title: '产品1_2', price: '28' }] }, { cateno: 'A3', title: '果汁3', goods: [{ goodsno: 'G5', title: '产品1_1', price: '28' }, { goodsno: 'G6', title: '产品1_2', price: '28' }] }, { cateno: 'A4', title: '盒装沙拉4', goods: [{ goodsno: 'G7', title: '产品1_1', price: '28' }, { goodsno: 'G8', title: '产品1_2', price: '28' }] }, { cateno: 'A5', title: '外卖沙拉5', goods: [{ goodsno: 'G9', title: '产品1_1', price: '28' }, { goodsno: 'G10', title: '产品1_2', price: '28' }] }, { cateno: 'A6', title: '果汁6', goods: [{ goodsno: 'G11', title: '产品1_1', price: '28' }, { goodsno: 'G12', title: '产品1_2', price: '28' }] }, { cateno: 'A7', title: '盒装沙拉7', goods: [{ goodsno: 'G13', title: '产品1_1', price: '28' }, { goodsno: 'G14', title: '产品1_2', price: '28' }] }, { cateno: 'A8', title: '外卖沙拉8', goods: [{ goodsno: 'G15', title: '产品1_1', price: '28' }, { goodsno: 'G16', title: '产品1_2', price: '28' }] }, { cateno: 'A9', title: '果汁9', goods: [{ goodsno: 'G17', title: '产品1_1', price: '28' }, { goodsno: 'G18', title: '产品1_2', price: '28' }] }, { cateno: 'A10', title: '盒装沙拉10', goods: [{ goodsno: 'G19', title: '产品1_1', price: '28' }, { goodsno: 'G20', title: '产品1_2', price: '28' }] }, { cateno: 'A11', title: '外卖沙拉11', goods: [{ goodsno: 'G21', title: '产品1_1', price: '28' }, { goodsno: 'G22', title: '产品1_2', price: '28' }] }, { cateno: 'A12', title: '果汁12', goods: [{ goodsno: 'G23', title: '产品1_1', price: '28' }, { goodsno: 'G24', title: '产品1_2', price: '28' }] }, { cateno: 'A13', title: '盒装沙拉13', goods: [{ goodsno: 'G25', title: '产品1_1', price: '28' }, { goodsno: 'G26', title: '产品1_2', price: '28' }] }, { cateno: 'A14', title: '外卖沙拉14', goods: [{ goodsno: 'G27', title: '产品1_1', price: '28' }, { goodsno: 'G28', title: '产品1_2', price: '28' }] }, { cateno: 'A15', title: '果汁15', goods: [{ goodsno: 'G29', title: '产品1_1', price: '28' }, { goodsno: 'G30', title: '产品1_2', price: '28' }] }, { cateno: 'A16', title: '盒装沙拉16', goods: [{ goodsno: 'G31', title: '产品1_1', price: '28' }, { goodsno: 'G32', title: '产品1_2', price: '28' }] }, { cateno: 'A17', title: '外卖沙拉17', goods: [{ goodsno: 'G33', title: '产品1_1', price: '28' }, { goodsno: 'G34', title: '产品1_2', price: '28' }] }, { cateno: 'A18', title: '果汁18', goods: [{ goodsno: 'G35', title: '产品1_1', price: '28' }, { goodsno: 'G36', title: '产品1_2', price: '28' }] } ], catesScrollHeight: [] }, getCount: function () { return '1' }, //事件处理函数 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { this.getCount(); if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } }) } //获取系统信息 主要是为了计算产品scroll的高度 wx.getSystemInfo({ success: res => { this.setData({ windowScrollHeight: res.windowHeight - 202 }) } }) //设置right scroll height 实现右侧产品滚动级联左侧菜单互动 setRightScrollItemHeight: { var cate_size = []; var sumscrollheight = 0;//总高度 var catebarheigth = 36;//单个分类bar的高度 var goodsviewheight = 101;//单个产品view的高度 this.data.cates.forEach(function (item) { let unitheight = catebarheigth + item.goods.length * goodsviewheight;//每个分类单元的高度=分类bar的高度+每个产品view的高度*该分类下的产品数 cate_size.push({ cateno: item.cateno, scrollheight: sumscrollheight }); sumscrollheight += unitheight; }) this.setData({ catesScrollHeight: cate_size.reverse()//分类scroll数组倒序处理后写入data }) } }, getUserInfo: function (e) { console.log(e) app.globalData.userInfo = e.detail.userInfo this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) }, //点击顶部定位地址事件处理 addressTap: function (e) { console.log("这里做地址处理") }, //notices轮播切换事件 noticesChange: function (e) { //修改notice swiper当前索引 this.setData({ noticesCurrent: e.detail.current }) }, //查看当前notices轮播的详细信息 showNoticeContent: function (e) { var index = this.data.noticesCurrent var title = this.data.notices[index].title var content = this.data.notices[index].content wx.showModal({ title: title, content: content, showCancel: false, confirmText: '我知道了' }) }, //产品左侧分类菜单点击事件 scrollLeftTap: function (e) { //修改当前选择的菜单分类编码 this.setData({ currentCateno: e.currentTarget.dataset.cateno, rightToView: 'r_' + e.currentTarget.dataset.cateno, leftScrollClick: true }) }, //产品右侧滚动事件 rightScroll: function (e) { if (!this.data.leftScrollClick) { var currentcate = this.data.catesScrollHeight.find((n) => n.scrollheight < e.detail.scrollTop).cateno; //修改当前选择的菜单分类编码 this.setData({ currentCateno: currentcate, leftToView: 'l_' + currentcate, }) } else { this.setData({ leftScrollClick: false }) } }, //加入购物车事件 buyTap: function (e) { var goodsno = e.currentTarget.dataset.goodsno//选择的产品goodsno var price = e.currentTarget.dataset.price//产品价格 var title = e.currentTarget.dataset.title//产品价格 if (goodsno) { let tmpArr