小程序开发软件开发,小程序技术开发
【小程序项目Development-JD.COM商城】uni-app产品列表页面(上)_技术博客_wx62affbc457373 _博客
博客明星评选
个人主页：@电脑魔术师作者简介：CSDN内容合伙人，全栈领域优质创作者。
推荐一个求职神器网站：Niuke.com 笔试题库面试经验实习招聘推送
如果没有账号，点击链接跳转到牛科。com，登录注册，开始刷题库。我们快点过海关面试吧。
这篇文章包含专栏。
022微信小程序实战JD.COM商城
@[目录]
一、进入产品页面有三种方式。
点击产品楼层(查询查询)分类页面(cid分类)搜索页面(查询查询)添加产品页面编译模式。
其次，创建一个goodlist分支(可选阅读*)git checkout -b goodlist
三。商品列表搜索数据请求商品列表搜索
请求路径：https://请求域名/api/public/v1/goods/search请求方法：获取请求参数参数名称
参数描述
评论
询问
查询关键字
国际开发委员会
分类ID
可选择的
页次
页面索引
可选首页
页面大小
每页长度
可选20。
响应数据{
消息:{
合计:2058，
pagenum: 1 ，
商品:[
{
goods_id: 57332，
cat_id: 998，
商品_名称: 400 ml海鲜冷藏冰袋充水冰袋医用冰袋户外冷藏保鲜熟食冷藏再利用(10包)，
商品_价格:14，
goods_number: 100，
商品_重量:100，
goods _ big _ logo : http://image4 . Suning . cn/uimg/B2C/newcatentries/0070083251-0000000168369396 _ 1 _ 800 x800 . jpg ，
goods _ small _ logo : http://image4 . Suning . cn/uimg/B2C/newcatentries/0070083251-0000000168369396 _ 1 _ 400 x400 . jpg ，
add_time: 1516662792，
upd_time: 1516662792，
hot _ number :0，
is_promote: false，
cat_one_id: 962，
猫_二_id: 981，
猫_三_id: 998
},
{
goods_id: 57194，
cat_id: 992，
商品_名称，伊利洗车工具，汽车美容用品，海绵刷，漆面清洗，海绵清洗，
商品_价格:29，
goods_number: 100，
商品_重量:100，
goods_big_logo : ，
goods_small_logo : ，
add_time: 1516662312，
upd_time: 1516662312，
hot _ number :0，
is_promote: false，
cat_one_id: 962，
猫_二_id: 980，
猫_三_id: 992
}
]
},
meta: {
Msg :已成功获取，
状态:200
}
}
定义数据存储参数脚本
导出默认值{
data() {
返回{
标题：，
//queryobject
queryObj: {
查询： ，
cid: ，
//页面
pagenum: 1，
//数据数量
页面大小：10
}
};
},
加载(选项){
console.log(选项)
this.title=options.name
this . query obj . query=options . query
this . query obj . cid=options . cat _ id
},
第四，调用接口获取列表数据数据定义数据存储加载函数定义数据调用函数脚本
导出默认值{
data() {
返回{
goodlist: []，
//商品总数
总计：0
};
},
加载(选项){
this.getGoodlist()
},
方法：{
异步getGoodlist(){
const {data:res}=等待单元。$ http . get(/API/public/v1/goods/search ，this.queryObj)
console.log(res)
if (res.meta.status！=200)返回uni。$showMsg(数据检索失败)
this . good list=RES . message . goods
this.total=res.message.total
}
}
动词（verb的缩写）呈现产品列表页面。由于某些图片无法显示，请定义默认图片。//默认图片
默认：“您的图像url”
Wxml结构模板
视角
！-列表页面-
视角
视角
在goodlist v-bind:key=i 中阻止v-for=(item，I)
！-左边的盒子-
视角
！-如果没有，使用默认图片-
image:src= item . goods _ big _ logo defaultimg mode= /image
/查看
！右边的盒子
视角
查看{ { item . goods _ name } }/查看
视角
查看@{ { item . goods _ price } }/查看
/查看
/查看
/阻止
/查看
/查看
/查看
/模板
影响
风格美化风格。货物清单{。好项目{
显示器：flex
border-bottom:2px solid # f1f1f 1；好项目-左侧{
图像{
身高：200rpx
宽度：200rpx
显示：块；
}
填充：20rpx
}。好项目-正确{
显示器：flex
伸缩方向：列；
justify-content:space-between；
填充：20rpx。商品名称{
字体大小：14px
}。商品信息{。物美价廉{
字体大小：16px
颜色：# c00000
}
}
}
}
}
/风格
效果：
六、将商品项目组件封装为自定义组件
在成分文件下创建我的商品组件
将对应结构和样式迁移过去模板
视角
视角
！-左侧盒子-
视角
！-没有得话就用默认图片-
image:src=很好。goods _ big _ logo defaultimg mode= /image
/查看
！-右侧盒子-
视角
查看{ {好。goods _ name } }/查看
视角
查看@{ {好。goods _ price } }/查看
/查看
/查看
/查看
/查看
/模板
脚本
导出默认值{
名称：我的商品，
道具：{
好：{
类型：对象，
默认值：{}
}
},
data() {
返回{
//默认图片
默认设置：“https://ts 1。cn。嗯。宾。1990年2月2日E3 b 74 f 2？rik=fy patit+C2 w4 za riu=http://image。卧石pm。com/WP-files/2017/04/tad 0 ldhk 60 S3 Gai 6 TN qd。jpg ehk=RWuC/9 spxwpwcw 3 w4 ax prb 3 yp 9 nt 3 jxlajvjwkrxv 5k=risl=PID=ImgRaw r=0
};
}
}
/脚本
样式lang=scss 。好项目{
显示器：flex
border-bottom:2px solid # f1f1f 1；好项目-左侧{
图像{
身高：200rpx
宽度：200rpx
显示：块；
}
填充：20rpx
}。好项目-正确{
显示器：flex
伸缩方向：列；
justify-content:space-between；
填充：20rpx。商品名称{
字体大小：14px
}。商品信息{。物美价廉{
字体大小：16px
颜色：# c00000
}
}
}
}
/风格
七、使用过滤器处理商品价格让商品价格以小数点显示
定义过滤器过滤器：{
tofixed(num){
//返回两位数值
退货数量(数字).toFixed(2)
}
},
使用过滤器查看@{ {好。goods _ price to fixed } }/查看
效果
到这里，如果还有什么疑问
欢迎私信博主问题哦，博主会尽自己能力为你解答疑惑的！
如果对你有帮助，你的赞是对博主最大的支持！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。