江苏江都建设集团有限公司网站,wordpress 好用的插件推荐,华创网站建设,网站模板欣赏目录 1 创建数据源2 添加轮播容器3 创建变量4 绑定变量5 预览应用总结 一般餐厅需要有一些宣传#xff0c;在我们的点餐页面可以在顶部加载广告位。广告主要是用轮播图的形式进行展示#xff0c;本节我们介绍一下如果显示广告。 1 创建数据源
打开控制台#xff0c;点击应用… 目录 1 创建数据源2 添加轮播容器3 创建变量4 绑定变量5 预览应用总结 一般餐厅需要有一些宣传在我们的点餐页面可以在顶部加载广告位。广告主要是用轮播图的形式进行展示本节我们介绍一下如果显示广告。 1 创建数据源
打开控制台点击应用点击前往云开发平台 选择云数据库点击号创建数据模型 选择创建数据模型选择从空白创建选择文档型数据库 输入模型名称、模型标识创建图片字段类型选择图片 增加一个是否显示的字段类型选择布尔值 切换到权限设置将权限改为全部用户可读管理员可写
2 添加轮播容器
数据模型创建之后目前只是提供了正式库我们需要从应用部分切换到旧版编辑器录入数据。
点击可视化开发打开我们的小程序 点击返回旧版编辑器 选择数据源的图标 选择我们刚刚创建的数据源点击添加一行 录入测试数据 在顶部添加一个轮播容器
3 创建变量
轮播容器里的图片我们需要从数据源中取出为此需要创建一个变量用来读取图片信息。从当前页面创建变量选择新建内置表查询 数据源选择广告管理触发方式选择入参变化时自动执行 增加查询条件设置为是否显示等于true 修改一下变量名称为swaperList
4 绑定变量
变量创建好了之后就需要把变量的值绑定到组件上。我们目前创建的Query返回结果里可以访问records属性得到数据具体可以点击变量的运行看到返回的JSON数据 records本身是一个数组可以用下标去获取具体的某条数据返回的数据是个对象可以用点的语法访问具体的属性
这个时候我们就可以给图片绑定具体的地址了先选中第一个图片在图片地址的fx进行绑定 逐级展开变量的属性选到最后的图片点击在表达式里出现具体的值 这个时候第一张图片就是我们从数据源中读取的了 为了设置图片的大小需要先选择图片的布局模式为裁剪填满 设置图片的宽为100%高为150px 给第二张图片绑定地址的时候我们要通过下标取第二条数据 这里有一个知识点是数组的下标是从0开始计数的因此我们的第二张图片的下标是填写1
5 预览应用
点击实时预览的图标就可以看到最终的效果
总结
我们本篇介绍了轮播图组件如何配置配置的步骤包括创建数据源录入测试数据创建变量以及变量绑定。介绍了数组如何通过下标获取元素这些基本操作是必须要掌握的随着应用的开发的深入处处都体现基本功。
