组件操作
组件操作包含：
- 输入框-设置输入框值
- 列表-滚动横向列表
- 列表-加载更多列表数据
- 列表-滚动到底部
- 图片-全频图片
- 图片-下载图片
- 音频-播放、暂停、停止
- 动画-矢量动画
- 条件式容器-切换视图条件 10.组件操作-重计算条件
1.文本输入框-设置输入框值
作用
- 当搜索框下方配置了一些热门搜索词时，点击某个词，能够将词的内容设置成为搜索框中的内容
- 在填写某些用户原本就保存在数据库中的数据时，比如用户名、手机号等，可以配置一键填写的功能，读取用户的数据，直接设置到输入框中
- 在输入框中输入了内容之后，点击发送之后，清空输入框的值# 行为简介
若页面中存在【文字输入】组件，当为其它组件配置【设置输入框值】的行为后，点击该组件，会将行为中的数据赋值给到【文字输入】组件
行为配置
在组件的交互中添加 组件操作 - 文本输入框 - 设置输入框值，在该行为中你需要选择要设置的输入框对象，然后配置要给这个输入框组件设置的值是什么（这个值可以是直接输入的内容，也可以是从远程数据中读取过来的数据）
| 行为选择 | 设置输入框值 |
|---|---|
 |
 |
场景
选择下拉框
当用户在使用选择下拉框时，选择后，将关闭下拉框，且将选择结果显示在输入框中，此时需要使用设置输入框值行为将下拉框内容和文字输入组件链接起来
设置搜索输入框值
此情况用于链接两个页面的搜索输入框，即在A页面输入了搜索输入框内容，点击搜索按钮，跳转至搜索详情页B，在页面B的上方也会有一个搜索输入框，此时为了用户体验，一般会在搜索按钮处配置参数，将输入框内容通过链接数据传输到页面B，并设置输入框的值=链接数据，Zion 的官方社区就是运用的这种方法
特殊说明
- 若页面内存在多个文字输入组件时，建议给组件重新命名，这样在选择文字输入组件时，就能够明确的找到需要选择哪一个
- 在当前页面添加设置输入框值行为，选择文字输入组件时，显示且只能选择当前页面内的文字输入组件
2.列表-滚动横向列表
作用
通过点击按钮控制滚动横向列表上一项/下一项位置。
行为配置
在组件的交互中添加 组件操作 - 列表 - 滚动横向列表 行为，在该行为中选择要滚动的横向列表对象，并且设置点击时候的期待的滚动效果是「上一个」还是「下一个」
| 行为选择 | 配置滚动 |
|---|---|
 |
 |
线上效果
点击左下角的按钮滚动到上一张图片，点击右下角的按钮切换到上一张图片
3.列表-加载更多列表数据
作用
在浏览页面中的列表数据时，想要加载查看更多的列表数据时，可以通过为配置【加载更多列表数据】的行为来实现
行为配置
在组件的交互中添加 组件操作 - 列表 - 加载更多列表数据 行为，在该行为的「列表对象」中选择页面中的需要加载更多数据的列表组件即可
| 行为选择 | 选择列表对象 |
|---|---|
 |
 |
特殊说明
当应用中存在多个列表时，建议通过正确命名列表组件从而在配置滚动时快速找到需要的列表。
4.列表-滚动到底部
作用
在浏览页面中的列表数据时，想要直接滚动列表查看最下方的数据时，可以通过【滚动到底部】的行为来实现
行为配置
在组件的交互中添加 组件操作 - 列表 - 滚动到底部 行为，在该行为的「目标组件」中选择页面中的需要滚动的列表组件即可
| 行为选择 | 选择列表对象 |
|---|---|
 |
 |
5.图片-全屏图片
作用
配置之后，点击该图片，图片会放大充满屏幕显示
行为配置
在图片组件的交互中添加 组件操作 - 图片 - 全屏图片行为，就可以实现点击显示放大的图片的效果
| 行为选择 | 配置行为 |
|---|---|
 |
 |
显示结果如下：
| img | img |
|---|---|
 |
 |
- 放大图片后长按图片，可调起微信原生的其它行为
| img | img |
|---|---|
 |
 |
特殊说明
- 只能对图片行为进行配置
- 对于小程序来说，图片放大之后，可以进一步长按图片调起微信原生的功能：转发给朋友、收藏、保存图片、翻译、提取文字、识别二维码（只能是腾讯系二维码，如小程序二维码、微信加好友二维码、公众号二维码、企业微信二维码等）
6.图片-下载图片
作用
通过点击【图片】组件本身或者点击【按钮】组件来下载特定的单张图片。该行为目前只适用于网页（Web）以及 H5端口，若要在小程序端口实现下载图片的行为，需要在图片全屏时长按下载。
行为配置
在组件的交互中添加 组件操作 - 图片 - 下载图片 行为，在该行为的图片中绑定远程数据请求过来的图片数据，当点击该组件时，就能够下载这张图片
| 行为选择 | 绑定数据 |
|---|---|
 |
 |
特殊说明
若要在小程序端口实现下载图片的行为，需要给图片配置全屏图片，在全屏时长按下载。
7.音频-播放、暂停、停止
作用
点击组件时，能够播放、暂停、停止音频和视频的行为，若页面内存在多个音频/视频时，建议重新命名，这样在选择音频/视频时，就能够明确的找到需要选择哪一个
行为选择
一般在按钮组件中添加 组件操作 - 音频/视频 -播放、暂停、停止的行为，行为中绑定的是 从远程数据中读取过来的音频或视频文件的 url
| 行为选择 | 绑定音频url |
|---|---|
 |
 |
小程序音频支持后台播放
小程序端的音频播放，增加了“后台播放”的配置。将其打开，能让音频在退出小程序后保持播放。
添加背景音乐
背景音乐的播放和暂停都需依靠媒体资源行为来完成，点击查看媒体资源上传详情。支持的媒体资源类型如下：
8.动画-矢量动画
作用
点击时设置动画组件中已经上传了的 lottie 动画的播放状态，包括播放、停止、暂停动画，选择只播放动画某一片段或者设置动画播放的方向（正放或倒放）
线上效果
行为配置
一般在按钮组件的交互中添加 组件操作 - 动画 - 矢量动画 的行为
播放
当为其他组件配置了「播放」的配置，点击组件时，矢量动画会从特定的帧开始播放
停止
当为其他组件配置了「停止」的配置，点击组件时，矢量动画会停止在规定帧，再点击“播放”时，会从头开始播放
暂停
当为其他组件配置了「暂停」的配置，点击组件时，矢量动画会停止在规定帧，再点击“播放”时，会接着继续播放
播放片段
当为其他组件配置了「播放片段」的配置，点击组件时，只会播放矢量动画设置的开始帧到结束帧部分内容
设置方向
- 方向：1 ，即正向播放矢量动画
- 方向：-1，即倒着播放矢量动画
特殊说明
- 网页端应用只能够配置动画的播放、停止、暂停
- 推荐下载 lottie 动画的地址：https://lottiefiles.com/
9.条件式容器-切换视图条件
作用
通过点击来控制条件式子容器视图之间切换的行为
场景
此行为适用于不想通过设置子容器条件来进行子容器视图切换，而是通过手动切换的场景
- 发送验证码的场景，在条件式容器中有「验证码未发送」以及「验证码已发送」的两个条件式子容器，当点击获取验证码按钮，获取验证码成功时切换到倒计时的子容器
- 密码输入框隐藏与显示的场景，在条件式子容器中有「隐藏密码」以及「显示密码」的两个条件式子容器，当点击显示密码的按钮时，切换到显示密码的子容器
行为配置
前提：当前页面存在条件式容器，且条件式容器有两个及以上的状况可选择
一般在条件式子容器的中的组件上配置 组件操作 - 条件式容器 - 切换视图条件 - 要起切换的条件式容器 - 要切换的子容器 ，当点击该组件时，就会切换到对应的子容器视图，呈现子容器中的内容 若页面内存在多个条件式容器时，建议给条件式容器组件和状况重新命名，这样在选择条件式容器时，就能够明确的找到需要选择哪一个条件式容器和状况
案例
验证码视图切换
在用户使用手机号登录时用到的验证码按钮，实际上就是将按钮都放置在条件式容器中，通过点击验证码按钮，配置切换视图条件行为至倒计时状况，开始显示60s倒计时，并且在计时结束后，添加切换视图条件行为至验证码状况，以此来切换验证码按钮和倒计时情况
| img | img |
|---|---|
 |
 |
密码输入框视图切换
在用户使用账号密码登录时的密码输入框实际上就是将文字输入框都放置在条件式容器中，通过点击显示和隐藏按钮，在按钮处配置切换视图条件，以此来切换密码的显示方式
| img | img |
|---|---|
 |
 |
购物车状态切换
在电商类小程序中加入购物车时的未添加时和已加购时的状态切换，实际上就是运用条件式容器，通过点击按钮，在按钮处配置切换视图条件，切换到不同视图中。
购物车状态切换中，为提升用户体验，一般是点击加购按钮，切换至加购数量的添加，但不会点击加购数量按钮，切换回未加购状态。类似于这种可以通过按钮从状态A切换至状态B，且不可逆的情况下，需要思考是否添加切换视图条件行为
| img | img |
|---|---|
 |
 |
特殊说明
触发切换视图条件行为时，假设条件式容器的子容器即设置了判断条件，又在一个按钮组件上添加了切换条件式子容器的行为时
- 若按钮在条件式容器的子容器内，设置的切换视图不满足当前条件下，也不会切换，会优先展示符合条件的视图；
- 若按钮不在条件式容器内，则条件式容器不受条件设置控制，即当点击按钮进行切换子容器视图时，就算不满足其子容器的条件设置，也会显示切换后的视图，但刷新页面后，条件式容器依旧会优先展示符合条件的视图
10.组件操作-重计算条件
作用
如果条件式子容器中配置的条件判断数据来自于远程数据，那么重计算条件就是让子容器根据最新的数据来进行条件判断，从而根据判断结果来显示对应的子容器内容，一个重计算条件行为只能控制一个条件式容器进行重新判断
配置指南
前提：当前页面存在条件式容器
假设条件式子容器的判断条件的数据来自于远程数据，那么为了让条件式容器根据最新的远程数据请求结果来进行条件判断的话，我们一般会将「重计算条件」的行为配置在远程数据请求的成功时下 在成功时下找到并配置 组件操作 - 条件式容器 - 重计算条件 - 需要重计算条件的条件式容器 即可
但通常，在使用条件式容器时，在其组件的内容中会默认打开「远程数据更新时重计算条件」，所以当此配置已经默认打开时，我们不需要在远程数据请求成功时额外配置「重计算条件」行为
特殊说明
若页面内存在多个条件式容器时，建议给条件式容器组件和状况重新命名，这样在选择条件式容器时，就能够明确的找到需要选择哪一个条件式容器和状况