宁波品牌网站推广优化公司,开发公司工程部工作总结,企业网关官网,wordpress后台中文小程序中首页一般显示轮播图的功能#xff0c;点击轮播图会跳转到具体的一篇文章或者是产品#xff0c;本篇我们就介绍一下轮播图功能的开发
01 设计数据源
我们轮播图组件需要两个字段#xff0c;一个是展示的图片#xff0c;一个是跳转页面传入的参数。打开数据源…小程序中首页一般显示轮播图的功能点击轮播图会跳转到具体的一篇文章或者是产品本篇我们就介绍一下轮播图功能的开发
01 设计数据源
我们轮播图组件需要两个字段一个是展示的图片一个是跳转页面传入的参数。打开数据源点击新建数据模型 输入名称首页轮播图 点击编辑按钮进入到添加字段页面 点击添加字段 先添加图片字段 然后添加服务标识字段 02 录入测试数据
点击管理数据录入测试数据 服务标识需要我们创建服务表的时候获取我们本节只讲解轮播图的使用暂不涉及到其他表的创建
03 添加轮播图
在首页中添加轮播图组件 点击轮播图属性可以看到轮播图主要是配置图片地址和跳转的页面 图片地址我们需要从数据源中获取获取数据源中的数据需要定义变量
04 定义变量
点击变量点击新建变量 输入变量名称swaperlist类型选择对象选择我们的轮播图数据源方法选择查询列表 05 数据绑定
我们先给第一张图片绑定图片地址从变量中选择第一条记录 绑定第二张图片地址 注意需要将records的下标改为1
$page.dataset.state.swaperlist.records[1].tp绑定第三张图片 $page.dataset.state.swaperlist.records[2].tp至此轮播图的功能就搭建好了后续我们在实现完服务功能页后重新修改一下轮播图让轮播图点击的时候可以直接跳转到服务详情页。
