商城微信小程序(二)——完成分类页面及商品列表页

商城微信小程序(二)——完成分类页面及商品列表页,第1张

vscode的easyless插件会自动生成index.wxss

主要是布局文件index.less的编写,注意less语法。

商品列表页功能:支持上拉加载更多,下拉刷新等

1,父组件(商品列表页)和子组件(Tabs组件)相互传递数据问题

2,上拉加载更多、下拉刷新实现的逻辑

效果展示

通过使用循环容器的设置值激活第一项,同时配置点击激活某一项,实现点击菜单,展示不同的商品内容功能。

创建数据表

注意:在数据中心你可以创建属于自己应用程序的数据表格,数据表格类型分为用户表、商品表、订单表和自定义表。

点击数据中心。

创建数据表:商品分类。

字段包含:分类名称。

点击数据中心。

创建数据表:商品。

字段包含:商品名称、商品图片、商品分类。

其中商品分类字段单表关联商品分类表。

创建事件

注意:事件是构建数据与界面元素组件链接的抽象逻辑,数据表与界面元素组件通过事件连接。

点击事件中心。

创建查询事件:查询分类。

添加一个成功的响应接口。

点击事件中心。

创建事件:查询商品。

触发器配置

注意:在检查器面板中的触发器设置面板创建触发器,可以对组件进行交互逻辑设置,或配合事件来进行动态数据 *** 作。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器:设置值,默认第一项是激活项。

选中流式布局列表。

点击检查面板中的触发器面板。

创建触发器:获取商品。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器:获取商品。

选中循环容器的列表条目。

点击检查面板中的触发器面板。

创建触发器:激活。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器:查询商品分类。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器:取消激活。

选中循环容器的列表条目上的标签文本。

点击检查面板中的触发器面板。

创建触发器:切换菜单。

绑定数据

注意:绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

选中流式布局组件的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/7956709.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存