一、产品描述
1、点餐页面 + 个人中心
2、点餐页面：
（1）、左侧菜单，右侧单品list：菜单与单菜list，菜单与菜品间实现点击和滑动联动效果；
（2）、单项菜品功能：购物数量的增加减少，并同步到购物车中；若单菜有多种口味选择，则进行规格选择，选择口味后（可默认口味）再进行上步操作；
（3）、底部结算栏：
A、购物车中实现有口味分类的已选菜品list；在购物车弹窗中，可对已选菜品进行加减操作，并同步到菜单列表中
B、去结算：跳转至订单页面
3、订单页面：
（1）、从storage中读取购物车菜品list 及 totalPrice，用户进行留言或者打包或者选择优惠券操作，并点击进行付款
4、个人中心
（1）我的红包 + 消费记录 + 我的订单
（2）我的订单：最近订单list + 已退款订单
-----------------------------------------------------------------0901---------------------------------------------------------------------------------
二、技术重点与难点
1、菜单栏与菜品列表的点击和滑动联动；
2、选规格，不同口味的同类菜品加入购物车；
3、购物车与订单页面的已选菜品渲染；
三、问题解决
1、关于菜单栏与菜品列表的点击滑动
（1）布局规定
左边菜单栏：使用<scroll-view >布局，注意使用scroll-view需要特意规定高度，不然后期联动无效果；
右边单品列表：使用<scroll-view>布局，规定高度；
（2）菜单栏联动单品列表：
WXML:
<scroll-view class='menu-wrapper' scroll-y="true" style="height: 100%;">
<view wx:for="{{goods}}" class="menu-item {{index == navActive ? 'current':''}}" catchtap="selectMenu" data-item-index="{{index}}" wx:key="{{index}}">
<view class="text"> {{item.typeName}} </view>
</view>
</scroll-view>
js:
// 菜单项 选择
selectMenu: function (e) {
var index = e.currentTarget.dataset.itemIndex;
this.setData({
contentActive: 'order' + index,
navActive: index,
})
//console.log( this.data.contentActive);
},
（3）单品列表滑动，菜单栏联动：
wxml:
<scroll-view scroll-y="true" scroll-into-view="{{contentActive}}" class="foods-wrapper" scroll-with-animation="true" bindscroll="onscroll">
<view wx:for="{{goods}}" class="food-list food-list-hook" wx:for-index="parentindex" wx:key="{{parentindex}}">
<view id="{{'order'+parentindex}}" class="title">{{item.typeName}}</view>
重点：（1） scroll-into-view中 contentActive 参数的设定要与 锚点的id 相一致，并且是在js中动态赋值的，不可在元素中直接设定值；
（2） 'order'+parentindex ： 是指锚点的命名，id不可以数字开头，所以要自定义
js：
onReady: function () {var _that = this;
var query = wx.createSelectorQuery().in(_that);
// //console.log(query)
var heightArr = [];
var s = 0;
// 获取每个 单位的内容 高度
query.selectAll(".food-list").boundingClientRect((react) => {
// //console.log(react);
react.forEach((res) => {
s += (res.height);
heightArr.push(s);
});
// //console.log(heightArr);
_that.setData({
heightArr: heightArr
})
//console.log(heightArr)
});
query.select(".foods-wrapper").boundingClientRect((res) => {
// //console.log(res.height)
_that.setData({
containerH: res.height
})
//console.log(res.height)
}).exec();
},
//滑动 内容区域
onscroll:function(e){
var scrollTop = e.detail.scrollTop;
var scrollArr = this.data.heightArr;
// //console.log(scrollArr)
if(scrollTop >= scrollArr[scrollArr.length - 1] - this.data.containerH){
// //console.log()
return
}else{
for (var i =0;i
if(scrollTop >= 0 && scrollTop
this.setData({
navActive:0
})
} else if (scrollTop >= scrollArr[i - 1] && scrollTop < scrollArr[i]){
this.setData({
navActive: i
})
}
}
}
},
重点：（1）需现在onReady中计算，滑动内容区域的高度
（2） onscroll ：计算当前滑动点的 scrollTop，并对菜单栏进行对比，实现联动
