一、前言介绍
二、创建goodlist 分支（选读*)
三、商品列表搜索数据请求
四、调取接口获取列表数据
五、渲染商品列表页面
六、将商品item组件封装为自定义组件
七、使用过滤器处理商品价格
八、上拉加载更多数据
九、设置节流阀控制数据请求
十、判断是否加载数据完毕
十一、 上拉刷新效果
十二、配置列表项链接跳转
十三、分支的提交
十四、小结
一、前言介绍
主要是有三种方式进入到商品页面
商品楼层点击（传参query 查询)
分类页面点击（传参cid 分类）
搜索页面点击（传参query查询）
添加商品页面编译模式
二、创建goodlist 分支（选读*)
git checkout -b goodlist1
三、商品列表搜索数据请求
商品列表搜索
请求路径：https://请求域名/api/public/v1/goods/search
请求方法：GET
请求参数
参数名
参数说明
备注
query
查询关键词
cid
分类ID
可选
pagenum
页数索引
可选默认第一页
pagesize
每页长度
可选默认20条
响应数据
{ "message": { "total": 2058, "pagenum": "1", "goods": [ { "goods_id": 57332, "cat_id": 998, "goods_name": "400毫升 海鲜食品冷藏冰包 注水冰袋医用冰袋户外冷藏保鲜熟食冷藏反复使用（10个装）", "goods_price": 14, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg", "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg", "add_time": 1516662792, "upd_time": 1516662792, "hot_mumber": 0, "is_promote": false, "cat_one_id": 962, "cat_two_id": 981, "cat_three_id": 998 }, { "goods_id": 57194, "cat_id": 992, "goods_name": "亿力洗车工具汽车美容用品海绵刷不伤车漆擦车海棉清洁海绵", "goods_price": 29, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516662312, "upd_time": 1516662312, "hot_mumber": 0, "is_promote": false, "cat_one_id": 962, "cat_two_id": 980, "cat_three_id": 992 } ] }, "meta": { "msg": "获取成功", "status": 200 }}12345678910111213141516171819202122232425262728293031323334353637383940414243444546
data 定义数据存贮参数
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
七、使用过滤器处理商品价格
让商品价格以小数点显示
定义 filter
filters: { tofixed(num){ // 返回两位数值 return Number(num).toFixed(2) } },123456
使用过滤器
效果
八、上拉加载更多数据
1. 在 pages.json 中配置上拉刷新&上拉距离
,{ "path" : "goods_list/goods_list", "style" : { // 下拉刷新距离 "onReachBottomDistance": 150 }1234567
2. 定义上拉触底行为
onReachBottom( ) { // 显示加载效果 uni.showLoading({ title:"数据请求中..." }) // 页面数自增加一 this.queryObj.pagenum ++ // 再次请求数据 this.getGoodlist() // 隐藏加载效果 uni.hideLoading() },123456789101112
3. 修改调取数据方法
methods: { async getGoodlist() { const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) console.log(res) if (res.meta.status != 200) return uni.$showMsg("数据调取失败") // 展开拼接 this.goodlist = [...this.goodlist,...res.message.goods] this.total = res.message.total } },123456789101112
4. 效果
九、设置节流阀控制数据请求
我们在下拉刷新过程会由于网速慢或各种原因，数据请求慢，此时我们在还没请求到数据又下拉刷新一次，但此时数据还未加载完成（函数还未运行完） ，此时页数加一，后面等到数据再次请求就不是下一页了
1. 定义节流阀
data() { return { // 节流阀 isLoading : false·······12345
2. 添加判断
（在获取数据前设置为true（允许加载数据，添加页码后设置为false，真正请求到数据在设置为true)
onReachBottom() { // 显示加载效果 uni.showLoading() // 如果正在加载 跳出函数 if (this.isLoading) return // 页面数自增加一 this.queryObj.pagenum++ // 再次请求数据 this.getGoodlist() // 隐藏加载效果 uni.hideLoading() }, methods: { async getGoodlist() { // 此时开始加载 设置为 true this.isLoading = true const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) console.log(res) if (res.meta.status != 200) return uni.$showMsg("数据调取失败") // 展开拼接 this.goodlist = [...this.goodlist, ...res.message.goods] this.total = res.message.total // 请求成功 设置为false （ 没有走完函数是不允许再次请求） this.isLoading = false } 1234567891011121314151617181920212223242526272829
3. 效果
十、判断是否加载数据完毕
在onReachButtom函数中修改如下 （ 这里我们假设你的数据条数为23条）
onReachBottom() { // 判断是否加载完毕 // 方法一 ( 总长度相加 ) if (this.goodlist.length + this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...') // 方法二 （ 页面数 * 页面数据条数） // if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total) return uni.$showMsg('没有更多的数据啦...')123456
十一、 上拉刷新效果
1. 配置可下拉刷新
2. 监听事件函数（重置全部数据）
onPullDownRefresh() { // 重置所有数据 this.queryObj.pagenum = 1 this.goodlist = [] this.total = 0 this.isLoading = false // 重写获取数据，并传箭头函数进行取消下拉刷新 this.getGoodlist(() =>uni.stopPullDownRefresh()) },123456789
3. 修改获取数据函数（添加停止下拉刷新）
async getGoodlist(callback) { // 此时开始加载 设置为 true this.isLoading = true const { data: res } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj) console.log(res) // 取消下拉刷新 (如果有则往后走达到存在则允许函数的效果) callback && callback() // 请求成功 设置为false （没有走完函数是不允许再次请求） this.isLoading = false // 隐藏加载效果 uni.hideLoading() if (res.meta.status != 200) return uni.$showMsg("数据调取失败") // 展开拼接 this.goodlist = [...this.goodlist, ...res.message.goods] this.total = res.message.total }12345678910111213141516
4. 效果
十二、配置列表项链接跳转
1. 更改页面结构
将block更改为view，并添加onclick 事件跳转页面，由于需要更多的操作所以这里不单纯更改为navigator组件
<
2. 定义参数跳转函数
methods: { goToUrl(item){ uni.navigateTo({ url:"/subpackages/goods_detail/goods_detail?goods_id=" + item.goods_id, }) },123456
3. 效果
十三、分支的提交
git add .git commit -m "商品分类页面开发完成"git push origin -u goodlistgit checkout master git merge goodlistgit push git branch -d goodlist1234567891011121314
十四、小结
在项目开发中经常会遇到列表页开发，如之前文章的搜索组件，显示建立列表 京东商城uni-app之自定义搜索组件（中） ， 而这些列表页都有以下开发共性
获取列表数据
渲染列表数据结构到页面
美化样式
下拉刷新请求数据（ 经典参数：请求数据关键字、页码数、每页数据量、其他属性等， 经典接口返回数据：状态meta(是否查询成功）、所含数据总数、）
下拉刷新节流阀
上拉刷新重新加载数据
用户评论
这个类京东商城小程序の商品列表页面做的相当不错啊！简洁易用，商品分类清晰，筛选功能也很方便，就是不知道能不能支持排序的功能?
有13位网友表示赞同！
终于不用再打开手机浏览器去逛了，可以直接用小程序购物真是太方便了！不过希望可以多一些促销信息，例如优惠券或者秒殺活动之类的。
有5位网友表示赞同！
这个设计有点像是京东啊，感觉产品力不错！就是不知道能不能加入更多互动元素，比如评价功能或者商品直播？
有17位网友表示赞同！
我用的类京东商城小程序的界面感觉不太流畅，页面加载速度慢了点，希望开发者能优化一下。
有19位网友表示赞同！
这个电商平台的功能确实很强大，商品种类也很丰富，比一些大平台还要全！但是用户体验方面还有待改进，比如搜索功能可以更精准一点、导航栏可以更直观些。
有17位网友表示赞同！
最近都在用这款小程序购物，其实还挺方便的，毕竟界面模仿京东的用户亲切感比较强，希望能多添加一些个性化的功能，让人感觉更独特！
有20位网友表示赞同！
作为一个移动用户来说，这类小程序真是太方便了，想买什么都能直接下单，而且商品信息一目了然，好评！只是希望能够加入收藏夹的功能，这样每次打开还能迅速找到之前感兴趣的商品。
有15位网友表示赞同！
界面模仿京东商城，感觉有点套路感，我希望能看到一些新颖的设计和差异化特色啊？
有18位网友表示赞同！
我一直在找一个类似京东小公家的购物体验小程序。终于找到了！这个类京东商城小程序的の商品列表页面做得好，可以很方便地找到自己想要的商品。
有7位网友表示赞同！
想问下有没有人知道这款类的京东商城小程序的官方网址吗？我在各大平台上没找到下载链接啊
有14位网友表示赞同！
界面设计比较简单，没有很多花哨的功能，但是使用起来还是比较方便的！
有15位网友表示赞同！
商品分类很清晰，而且能快速找到自己想要的商品，这才是电商小程序最重要的功能吧！希望后续能加入更多互动元素和促销活动，吸引更多用户。
有20位网友表示赞同！
这款类京东商城的小程序真的让人感觉回到了京东首页的氛围之中！但是个人不太喜欢这种固定的布局框架，希望能更加灵活一些，比如自定义分类等等。
有12位网友表示赞同！
作为一个经常在手机上购物的人来说，这类小程序非常实用！希望开发者能继续更新和完善这个产品，增加更多精彩的功能。
有13位网友表示赞同！
"类京东商城”的商品列表页面，感觉就是模仿京东，没什么创新之处。我希望能够看到一些更有特色的设计和功能，这样才能吸引我使用。
有19位网友表示赞同！
这款类京东商城小程序挺好的，界面简洁易用。但是希望可以提供更多支付方式选择啊！
有13位网友表示赞同！
虽然这个类京东商城小程序的功能比较完善，商品种类繁多。但个人感觉它缺乏个性化定制服务，有点像流水线式的产品体验，希望能改进一下!
有5位网友表示赞同！