侧边栏

导语

我们在使用淘宝时会有一个小功能场景，侧滑出功能栏，我就想着用 zion 复刻一下，毕竟这些功能客户有时会提出来。下面我们先来看一下淘宝的效果：

当然这是淘宝的效果，用了动态的监听，zion 缺少对于动态场景的监听，所以我们只能做 0.5 版本。 以下是 zion 的效果：

页面构成

• 列表组件
• 条件式容器（本场景实现，所以用购物车场景来模拟，具体数据模型不赘述） 现在来说思路一般情况下我们最先想到的是用选择视图来做，因为选择视图容器其实就是单行列表嵌套条件式容器，但是 zion 相当于把选择视图封装成组件来供你使用，很多场景功能实现不完美。 所以大多数情况我们要用列表外加条件式容器来做。

难点一：如何实现试图切换

这里就需要用到条件式容器，两种情况，选中和未选中。

情况我们已经设置完成，但是如何转变这两种情况，这时候我们就在想，这种情况涉及到了什么，怎么让条件式容器知道我们点击了，然后切换视图。程序其实就是数据的传递、计算、呈现。这里只是这个页面上的数据传递，所以我们能想到就是用页面变量来进行数据传递。接下来设置一下页面变量。

页面变量的名称可以自己来进行设置，但是要遵循可读性的原则，让自己知道是什么意思。然后类型的选择，这边是因为我们要知道自己点击了第几个视图，所以选择的是整数类型。

难点二：条件式容器如何配置

在这个场景中条件式容器共有两种状况“选中”和“未选中”。

• 选中的条件是什么是你点击的第几个项，这边我们是用页面变量来接收的，所以条件配置是页面变量index=列表中的项数据对应的index。

• 未选中就是默认的情况

• 这里边的条件不需要配置，因为就两种情况，选中和未选中

• 视图容器中展示的为商品图片、名称、价格

• 当然还有点击时的跳转动作设置，点击行为因为点击「未选中」的容器会切换到「选中」的容器内容，但是在这么多商品中如何确定去要切换的商品是哪一个呢？这时就需要通过页面变量来记录我点击了页面中的哪一项商品。 设置页面变量，给页面变量赋值 = 项数据的index 因为在你设置页面变量时，页面变量的值是空值，就是null，当然我们要让这一个项转变为选中，你就要用页面变量来告诉它我（页面变量）等于你的项数据了，快跳转到选中项吧，因为选中项的条件式容器的条件就是页面变量等于项数据的index。 刷新「列表」相当于后台的重计算，重新计算条件式容器的条件。

优化

这时你已经完成大半了，你可以预览试一下，发现点击了后能出现侧边框，但是再点击回不去。 接下来就是选中之后的点击时行为选择切换视图条件到未选中视图。