关于微信小程序外卖界面实现选购切换分类与数量加减功能开发步骤：
效果图

实现以下功能
一、 点击分类项，切换右边的食品，并高亮自身 

这个实现比较简单，给一个states数组，用于记录每一项分类的状态，点击设为true，wxml渲染时三目运算判断即可。
 
categoryStates = categoryStates.map(function (item, i) {
if (index == i) {
item = true;
} else {
item = false;
}
return item;
});
相应的wxml文件，class="{{categoryStates[index] ? 'category-item-active' : ''}}"
二、 加减按钮 

初始只有一个加号 

点击加号后，相应商品数量+1，并出现减号 

减至0时，减号消失，连同数量值
设计数组结构
 
cartData: {}，它的键是Food表的objectId，值是数量。
以下是js代码实现
add: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
console.log(foodId);
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId] ? cartData[foodId] : 0;
// 自增1后存回
cartData[foodId] = ++foodCount;
// 设值到data数据中
that.setData({
cartData: cartData
});
}
在wxml文件中绑定数据如下
 
<view class="stepper">
<!-- 减号 -->
<view class="symbol subtract" wx:if="{{cartData[item.objectId]}}">-</view>
<!-- 数量 -->
<view class="value">{{cartData[item.objectId]}}</view>
<!-- 加号 -->
<view class="symbol add" bindtap="add" data-food-id="{{item.objectId}}">+</view>
</view>
上述代码中，通过wx:if判断当前商品的数量是否存在，无则不显示减号按钮；而在加号按钮旁要显示的数量就是{{cartData[item.objectId]}}；点击事件传递的foodId就是{{item.objectId}}
减法按钮类似
 
subtract: function (e) {
// 所点商品id
var foodId = e.currentTarget.dataset.foodId;
// 读取目前购物车数据
var cartData = that.data.cartData;
// 获取当前商品数量
var foodCount = cartData[foodId];
// 自减1
--foodCount;
// 减到零了就直接移除
if (foodCount == 0) {
delete cartData[foodId]
} else {
cartData[foodId] = foodCount;
}
// 设值到data数据中
that.setData({
cartData: cartData
});
}
减法与加法基本类似，值得一提的是，减法要判断非负的合法性，所以将自减至零时，直接将元素通过delete操作移除，省去后续提交购物车遍历汇总的非零判断的烦琐。
Todo List 

购物车动画 

购物车逻辑 

提交数据到后端存储

注：以下三个例子，均以切换active为例
一、切换
toggleClass
<div class="btn" :class="{'active':isChoose}" @click="togglePay"></div>

data(){
	return {				
		isChoose : false
	}
},

methods:{
	togglePay:function(){
		this.isChoose = !this.isChoose
	}
}
效果如下图：


二、单选
<div class="btn" :class="{'active':isChoose==index}" @click="isChoose=index"><span></span></div>
data(){
    return {
	isChoose : null
    }
},
效果如下图：


三、多选

<template>
    <ul>
	<li v-for="(item,index) in cartList">
		<div class="btn" :class="{'active':item.active}" @click="togglePay(item,index)"></div>
	</li>
    </ul>
<script > 
    import Vue from 'vue'
    export default{
        methods:{
            togglePay:function(item,index){	
		if(item.active){
		    Vue.set(item,'active',false);//为item添加不存在的属性，需要使用vue提供的Vue.set( object, key, value )方法。 
		}else{
		    Vue.set(item,'active',true);
		}
	     }}
	}
</script>

思路：一层循环遍历操作的元素并获取当前遍历到的元素的下标，通过下标去选择显示对应的内容模块。
二层循环将元素恢复操作前的状态。
<!--- JS -->

var fbUls =document.getElementById("oUl");
var fbLis = fbUls.getElementsByTagName("li");
var aDivs = document.getElementsByClassName("theDiv");
for(var i = 0,val=fbLis.length;i<val;i++){
    fbLis[i].index = i; //存放当前元素的下标
    fbLis[i].onclick = function(){
        for(var j=0; j< fbLis.length; j++){
            fbLis[j].className="";
            aDivs[j].style.display = "none";
        }
        //给当前点击的元素添加活跃标记
        this.className="liactive";
        //显示对应的模块内容
        aDivs[this.index].style.display = "block";
    };
}
<!-- HTML -->


<div>
    <ul id="oUl">
        <li class="liactive">首页</li>
        <li>产品</li>
        <li>合作</li>
    </ul>
</div>
<div class="theDiv" id="oDiv1" style="display:block;">首页模块内容：这是首页</div>
<div class="theDiv" id="oDiv2">产品模块内容：这是产品</div>
<div class="theDiv" id="oDiv3">合作模块内容：这是合作</div>
<!-- 效果 -->

效果图

wxml:
   <!-- tab框 衣服 裤子 套装 女鞋 -->
  <view class="nav_title">
      <view class="nav_tab">
      <view wx:for="{{list}}" class="{{selected==index?'hidden':'show'}}" data-index='{{index}}' bindtap="selected">{{item}}
      <view class="{{selected==index?'nav_underline':''}}"></view>
      </view>
      </view>
      <!-- tab框显示内容 -->
      <view wx:if="{{selected == 0}}">aaa</view>
      <view wx:if="{{selected == 1}}">bbb</view>
      <view wx:if="{{selected == 2}}">ccc</view>
      <view wx:if="{{selected == 3}}">ddd</view>
</view> 
wxss:
/*tab框切换*/
.nav_tab{
  width:100%;
  height:100rpx;
  display:flex;
  flex-direction:row;
}
.show{
  line-height:100rpx;
  text-align:center;
  flex:1;
  color:#333333;
  font-size:28rpx;
  opacity: 0.5;
}
.hidden{
  line-height:100rpx;
  text-align:center;
  color:#ef9ba8;
  flex:1;
  font-size:28rpx;
}
.nav_underline{
  background:#ef9ba8;
  width:54rpx;
  height:6rpx;
  margin-top:-10rpx;
  margin-left:70rpx;
  border-radius:8rpx;
}
js:
data:{
    //tab框
    selected: 0,
    list: ['上衣','裤子','套装','女鞋']
}
 //tab框
  selected: function (e) {
    console.log(e)
    let that= this
    let index = e.currentTarget.dataset.index
    console.log(index)
    if( index == 0){  
      that.setData({
        selected: 0
      })
    }else if( index == 1) {
      that.setData({
        selected: 1
      })
    }else if(index == 2 ){
      that.setData({
        selected: 2
      })
    }else{
      that.setData({
        selected: 3
      })
    }
  },