uniapp餐品列表左右联动

Uniapp 中实现左右联动可以用到 `uni-swipe-action` 和 `uni-list` 组件。

首先，使用 `uni-swipe-action` 组件实现左右滑动菜单效果，例如：

<template>
  <view>
    <uni-list>
      <uni-swipe-action right-text="加入购物车">
        <view slot="content">餐品1</view>
      </uni-swipe-action>
    </uni-list>
  </view>
</template>

然后，在 `uni-swipe-action` 中添加一个点击事件，在点击事件中修改数据，例如：

<template>
  <view>
    <uni-list>
      <uni-swipe-action right-text="加入购物车" @click="addToCart">
        <view slot="content">餐品1</view>
      </uni-swipe-action>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [] // 购物车列表
    }
  },
  methods: {
    addToCart() {
      // 添加到购物车列表中
      this.cartList.push({
        name: '餐品1'
      })
    }
  }
}
</script>

最后，在购物车列表中使用 `uni-list` 显示出来，例如：

<template>
  <view>
    <uni-list>
      <uni-list-item v-for="(item, index) in cartList" :key="index">
        {{ item.name }}
      </uni-list-item>
    </uni-list>
  </view>
</template>

这样就实现了餐品列表和购物车列表的左右联动效果。