培训报名小程序报名列表页开发

这节我们来开发报名列表功能,先看原型
在这里插入图片描述

1 创建页面

功能要在页面上呈现,需要先创建页面。打开我们的培训报名小程序,在页面区,点击创建页面的图标
在这里插入图片描述
输入页面的名称报名列表页
在这里插入图片描述

2 组件搭建

列表页搭建可以使用数据列表组件,往页面中添加数据列表组件
在这里插入图片描述
修改数据源,选择为培训内容
在这里插入图片描述
修改一下组件,把右侧的图标修改为文本组件,修改文本内容为报名
在这里插入图片描述
默认组件已经设置了一定的样式,我们需要修改一下。修改一下普通容器的宽度,设置为50px
在这里插入图片描述
切换到CSS代码模式,去掉我们的不透明度
在这里插入图片描述

3 设置URL参数

我们如果从首页进来,应该根据不同的类目过滤该类目下的数据。传入的参数需要先设置URL参数。在大纲树里选中页面,点击右侧的新建URL参数
在这里插入图片描述
输入参数名称categoryid
在这里插入图片描述

4 设置筛选条件

页面传参设置好之后,选中数据列表组件,设置一下筛选条件,让我们的培训内容的分类字段等于我们页面传入的参数
在这里插入图片描述
注意这里的传入值选择fx绑定,绑定时候选择对应的变量即可
在这里插入图片描述

5 首页跳转

列表页设置好之后,我们要设置页面的跳转。回到首页,选中我们数据列表的组件
在这里插入图片描述
要给组件设置事件,事件我们选择页面跳转,跳转的时候要传入当前数据的ID
在这里插入图片描述
在这里插入图片描述
这里出现了我们在列表页上设置的URL参数,使用fx绑定,选择我们的ID
在这里插入图片描述
在这里插入图片描述
这样页面就搭建好了

6 最终的效果

现在点击首页的时候就可以按照分类进行数据过滤
在这里插入图片描述

总结

我们本篇带着大家实现了一下列表页的功能,列表功能需要使用数据列表组件,需要设置URL参数、筛选条件。页面跳转的时候要正确的设置传入的ID才可以实现数据的过滤。

猜你喜欢

转载自blog.csdn.net/u012877217/article/details/131568539
今日推荐