哈咯，大家好～昨天在刷淘宝的时候我看到侧滑出的功能栏，我就想能不能用zion复刻一下，毕竟这些功能客户有时会提出来～所以晚上我就实践了一下，下面我们先来看一下淘宝的效果：
当然这是淘宝的效果，用了动态的监听，zion缺少对于动态场景的监听，所以我们只能做0.5版本
以下是zion的效果：
页面构成
列表组件
条件式容器
这是一个场景实现所以我就用购物车场景来模拟，具体的数据模型我就不过多赘述
现在来说思路一般情况下我们最先想到的是用选择视图来做，因为选择视图容器其实就是单行列表嵌套条件式容器，但是zion相当于把选择视图封装成组件来供你使用，很多场景功能实现不完美。
所以大多数情况我们要用列表外加条件式容器来做。
难点一、如何实现试图切换
这里就需要用到条件式容器，两个情况，选中和未选中。
情况我们已经设置完成，但是如何转变这两种情况
这时候我们就在想，这种情况涉及到了什么，怎么让条件式容器知道我们点击了，然后转换视图。
程序其实就是数据的传输，计算，呈现。这里只是这个页面上的数据传输，所以我们能想到就是使用页面数据来进行数据传输。接下来设置一下页面数据。
页面数据的名称可以自己来进行设置，但是要遵循可读性的原则，让自己知道是什么意思。然后类型的选择，这边是因为我们要知道自己点击了第几个视图，所以选择的是整数类型。
难点二、条件式容器如何配置
在这个场景中条件式容器共有两种状况“选中”和“未选中”。
选中的条件是什么是你点击的第几个项，这边我们是用页面数据来接收的，所以条件配置是页面数据index=列表中的项数据对应的index。
未选中就是默认的情况
这里边的条件就选择「总是」
视图容器中展示的为商品图片、名称、价格
当然还有点击时的跳转动作设置，点击行为
因为点击「未选中」的容器会切换到「选中」的容器内容，但是在这么多商品中如何确定去要切换的商品是哪一个呢？这时就需要通过页面数据来记录我点击了页面中的哪一项商品。
设置页面数据，给页面数据赋值 = 项数据的index
因为在你设置页面数据时，页面数据的值是空值，就是null，当然我们要让这一个项转变为选中，你就要用页面数据来告诉它我（页面数据）等于你的项数据了，快跳转到选中项吧，因为选中项的条件式容器的条件就是页面数据等于项数据的index。
刷新「列表」相当于后台的重计算，重新计算条件式容器的条件。
优化这时你已经完成大半了，你可以预览试一下，发现点击了后能出现侧边框，但是再点击回不去接下来就是选中之后的点击时行为选择切换试图条件到未选中试图。
