当前位置: 首页 > news >正文

HarmonyOS开发商城首页实现二

目录

一:功能简介

二:代码实现

三:效果图


一:功能简介

上一节我们实现了首页的搜索和轮播图,这一节我们来显示商品列表,和商品跳转的部分逻辑。这里我们会使用axios请求接口数据,构造商品数组来接收数据,在页面循环渲染商品信息。

1:功能组件

List:用来显示列表的组件

ForEach:循环展示列表内容

ListItem:展示列表某一行数据

router:路由组件,实现页面跳转

axios: 实现接口请求

二:代码实现

1:商品数据获取

定义商品字段:

export class goods {
  goods_id: string = "";
  name:string = "";
  image: string = "";
  sales_num: string = "";
  sell_price: string = "";
  lineation_price: string = "";
  content : string = ""
}

商品数组构造,接口请求数据:

interface GeneratedTypeLiteralInterface_1 {

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 嘉兴网站建设的思路
  • 【JDK】JDK环境配置踩坑记录Mac
  • CAD-文字、图块、多行文字,沿多段线对齐到多段线的顶点,沿直线进行均分,都可以操作
  • Python 编程实例
  • 计算机技术基础 (bat 批处理)Note6
  • 3096. 得到更多分数的最少关卡数目
  • 【leetcode详解】直角三角形:用空间换时间(O(m*n*(m+n))>O(m*n))(思路详解)
  • 使用Python做一个微信机器人
  • android 音频播放器,(二)SoundPool简介
  • 面试经典 222. 完全二叉树的节点个数
  • 身份证OCR识别接口如何对接?(二)
  • 《Linux运维总结:基于Ubuntu 22.04+x86_64架构CPU部署etcd 3.5.15二进制分布式集群》
  • 样式与特效(2)——新闻列表
  • java之方法引用 —— ::
  • c语言第七天笔记
  • Google 是如何开发 Web 框架的
  • hexo+github搭建个人博客
  • [NodeJS] 关于Buffer
  •  D - 粉碎叛乱F - 其他起义
  • emacs初体验
  • ES6之路之模块详解
  • JS变量作用域
  • Linux Process Manage
  • Theano - 导数
  • vue从创建到完整的饿了么(11)组件的使用(svg图标及watch的简单使用)
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 机器学习学习笔记一
  • 开发了一款写作软件(OSX,Windows),附带Electron开发指南
  • 使用阿里云发布分布式网站,开发时候应该注意什么?
  • 数据可视化之 Sankey 桑基图的实现
  • 微信小程序:实现悬浮返回和分享按钮
  • 我与Jetbrains的这些年
  • 移动互联网+智能运营体系搭建=你家有金矿啊!
  • 用jquery写贪吃蛇
  • ​二进制运算符:(与运算)、|(或运算)、~(取反运算)、^(异或运算)、位移运算符​
  • #微信小程序:微信小程序常见的配置传旨
  • #中的引用型是什么意识_Java中四种引用有什么区别以及应用场景
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (done) ROC曲线 和 AUC值 分别是什么?
  • (libusb) usb口自动刷新
  • (Matlab)遗传算法优化的BP神经网络实现回归预测
  • (备忘)Java Map 遍历
  • (二十三)Flask之高频面试点
  • (翻译)Entity Framework技巧系列之七 - Tip 26 – 28
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)spring boot儿童教育管理系统 毕业设计 281442
  • (附源码)spring boot建达集团公司平台 毕业设计 141538
  • (微服务实战)预付卡平台支付交易系统卡充值业务流程设计
  • (续)使用Django搭建一个完整的项目(Centos7+Nginx)
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • (转)关于pipe()的详细解析
  • .gitignore文件使用
  • .net core 实现redis分片_基于 Redis 的分布式任务调度框架 earth-frost
  • .NET Core 中的路径问题