本文详细描述了如何在电商购物车页面中通过左滑展示额外操作、采用动态组件处理多选功能，以及实现组件间的交互设计。
APP页面例如电商购物车页面，商品可左滑显示分享、添加收藏、删除等操作按钮，并且页面的商品可全选或取消勾选，那这种情况应该怎样实现呢？
首先左滑显示操作按钮的很简单，先画一个购物车页面，显示已添加购物车的商品信息
接下来我们要实现左滑操作，可将一个商品的全部信息设置为一个群组，并命名商品左滑，左滑后要显示的动作效果是盖住该商品信息，显示分享、收藏、删除等按钮
我有两种思路，一种是再复制一个购物车页面，直接画出左滑要显示的按钮效果，这样实现的交互就是左滑显示要操作的按钮页面，进行页面跳转交互
实现页面交互，可直接拉取页面的箭头直接拉向要交互的页面，也可在右侧添加交互事件。
还有一种思路就是，设置动态组件，将操作按钮画到动态组件里面，组件设置为隐藏状态，左滑商品群组时显示该动态组件，再做一个交互，右滑该组件隐藏该动态组件，可以再让重新显示购物车页面（这个可以试一下哦）。
接下来我们看多选交互怎么实现。
首先我们先在购物车页面，在每个商品和店铺名称前添加多选组件
基础组件可能未找到该组件，可直接搜索多选，选择iOS基础组件
将全部全选按钮设置为一个群组，转换为动态组件，默认都是不勾选的状态，我们要实现的效果是，单击全选后，该群组的所有都勾选上，再次点全选，取消勾选，全部都取消勾选
所有需要再复制个状态2，状态1是取消勾选的状态，状态2是全选的状态
我们要实现的交互就是，点击状态1的按钮会切换组件状态显示状态2的数据，因此需要全选按钮都需要和状态2的组件完成交互，反之，状态2的每个组件也需要和状态1的组件完成交互，点击状态2的全选，会切换至组件1的状态。
完成交互后可进行预览，查看是否满足要的实现效果
扫一扫
2524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
