uni-app开发自定义商品列表

 时间:2026-02-16 23:48:03

1、创建一个uni-app功能,并在工程下的index.vue文件中进行商品列表的编写,在编写商品列表之前,在Page.json中配置index.vue文件的标题

uni-app开发自定义商品列表

2、编写一个商品列表的模块出来

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

3、随后在srcipt中的data方法中的创建一个数组,名为shops,在其他添加几条数据并在view模块中进行渲染。

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

4、随后封装自定义的商品列表页,在项目中的components(该目录是uni-app中存放一个自定义的组件和公共的组件)目录下创建一个shopListPage.vue文件

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

5、封装好自定义的商品列表之后,在idnex.vue文件中进行引入和注册

uni-app开发自定义商品列表

uni-app开发自定义商品列表

uni-app开发自定义商品列表

  • qq个性赞怎么设置
  • Timberland鞋尺码
  • 教你使用手机轻松制作贺卡:图痒使用教程
  • 槐米的功效与作用
  • 迷你纸杯蛋糕的做法
  • 热门搜索
    早餐粥的做法大全 莴苣的做法 红萝卜的做法大全 糖醋莲藕的做法 照烧汁的做法 薏米红豆粥的做法 艾叶粑粑的家常做法 小便时尿道刺痛是怎么回事 西兰花做法 香芹的做法大全