文章目录

一、前言介绍

二、创建goodlist 分支（选读*)

三、商品列表搜索数据请求

四、调取接口获取列表数据

五、渲染商品列表页面

六、将商品item组件封装为自定义组件

七、使用过滤器处理商品价格

八、上拉加载更多数据

九、设置节流阀控制数据请求

十、判断是否加载数据完毕

十一、 上拉刷新效果

十二、配置列表项链接跳转

十三、分支的提交

十四、小结

一、前言介绍

主要是有三种方式进入到商品页面

1. 商品楼层点击（传参 query 查询)
2. 分类页面点击（传参 cid 分类）
3. 搜索页面点击（传参 query 查询）

添加商品页面编译模式

二、创建goodlist 分支（选读*)

 git checkout -b goodlist
1

三、商品列表搜索数据请求

商品列表搜索

• 请求路径：https://请求域名/api/public/v1/goods/search
• 请求方法：GET
• 请求参数

• 响应数据

{
    "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 定义数据存贮参数

<script>
  export default {
    data() {
      return {
        title:'',
        // queryobject
        queryObj: {
          query: '',
          cid:"",
           // 页面
          pagenum: 1,
           // 数据条数
          pagesize: 10
        }
      };
    },
    onLoad(options){
      console.log(options)
      this.title = options.name
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cat_id || ''
      },
12345678910111213141516171819202122

四、调取接口获取列表数据

1. data定义数据存贮
2. onload 加载函数
3. 定义数据调取函数

<script>
  export default {
    data() {
      return {
        goodlist: [],
        // 总的商品数
        total: 0
      };
    },
    onLoad(options){
      this.getGoodlist()
      },
      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 = res.message.goods
        this.total = res.message.total
        }
    }
123456789101112131415161718192021

五、渲染商品列表页面

1. 由于有些图片无法显示，定义一个默认图片

    // 默认图片
        defaultimg: "your image url"
12

2. wxml 结构

<template>
  <view>
    <!-- 列表页 -->
    <view class="goods-list">
      <view class="good-item">
        <block v-for="(item,i) in goodlist" v-bind:key="i">
          <!-- 左侧盒子 -->
          <view class="good-item-left">
            <!--  没有得话就用默认图片  -->
            <image :src="item.goods_big_logo || defaultimg" mode=""></image>
          </view>
          <!-- 右侧盒子 -->
          <view class="good-item-right">
            <view class="good-item-name">{{item.goods_name}}</view>
            <view class="good-item-info">
              <view class="good-price">￥ {{item.goods_price}}</view>
            </view>
          </view>
        </block>
      </view>
    </view>


  </view>
</template>
12345678910111213141516171819202122232425

• 效果

3. 样式美化

<style lang="scss">
  .goods-list {
    .good-item {
      display: flex;
      border-bottom: 2px solid #f1f1f1;

      .good-item-left {
        image {
          height: 200rpx;
          width: 200rpx;
          display: block;
        }

        padding: 20rpx;
      }

      .good-item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;

        .good-item-name {
          font-size: 14px;

        }

        .good-item-info {
          .good-price {
            font-size: 16px;
            color: #c00000;
          }
        }
      }
    }
  }
</style>
12345678910111213141516171819202122232425262728293031323334353637

• 效果：

六、将商品item组件封装为自定义组件

1. 在component文件下创建my_goods组件
2. 将对应结构和样式迁移过去

<template>
  <view>
    <view class="good-item">
      <!-- 左侧盒子 -->
      <view class="good-item-left">
        <!--  没有得话就用默认图片  -->
        <image :src="good.goods_big_logo || defaultimg" mode=""></image>
      </view>
      <!-- 右侧盒子 -->
      <view class="good-item-right">
        <view class="good-item-name">{{good.goods_name}}</view>
        <view class="good-item-info">
          <view class="good-price">￥ {{good.goods_price}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "my-goods",
    props: {
      good: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        // 默认图片
        defaultimg: "https://ts1.cn.mm.bing.net/th/id/R-C.e74289455bec048b0ba2feb90e3b74f2?rik=fYpAtit%2bc2W4ZA&riu=http%3a%2f%2fimage.woshipm.com%2fwp-files%2f2017%2f04%2ftAd0ldHk60s3GAI6TNqd.jpg&ehk=RWuC%2f9spxWPWcW3w4axPrb3YP9Nt3JXlajvJWKRXV5k%3d&risl=&pid=ImgRaw&r=0"
      };
    }
  }
</script>

<style lang="scss">
  .good-item {
    display: flex;
    border-bottom: 2px solid #f1f1f1;

    .good-item-left {
      image {
        height: 200rpx;
        width: 200rpx;
        display: block;
      }

      padding: 20rpx;
    }

    .good-item-right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;

      .good-item-name {
        font-size: 14px;

      }

      .good-item-info {
        .good-price {
          font-size: 16px;
          color: #c00000;
        }
      }
    }
  }
</style>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273

七、使用过滤器处理商品价格

让商品价格以小数点显示

1. 定义 filter

 filters: {
      tofixed(num){
        // 返回两位数值
        return Number(num).toFixed(2)
      }
    },
123456

2. 使用过滤器

    <view class="good-price">￥ {{good.goods_price | tofixed }}</view>
1

3. 效果

八、上拉加载更多数据

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 组件

< <!-- 列表页 -->
    <view class="goods-list">
      <view v-for="(item,i) in goodlist" v-bind:key="i" @click="goToUrl(item)">
        <my-goods :good="item"></my-goods>
      </view>
    </view>
123456

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 goodlist

git checkout master 

git merge goodlist

git push 

git branch -d goodlist

1234567891011121314

十四、小结

在项目开发中经常会遇到列表页开发，如之前文章的搜索组件，显示建立列表 ✨ 京东商城uni-app之自定义搜索组件（中） ✨， 而这些列表页都有以下开发共性

1. 获取列表数据
2. 渲染列表数据结构到页面
3. 美化样式
4. 下拉刷新请求数据（ 经典参数：请求数据关键字、页码数、每页数据量 、其他属性等， 经典接口返回数据：状态meta(是否查询成功）、所含数据总数、 ）
5. 下拉刷新节流阀
6. 上拉刷新重新加载数据
7. 为列表项添加链接