微信小程序商城项目（篇6）：产品列表页面_微信小程序实现商品列表和详情页

效果展示

步骤1：获取相关产品列表数据

  onLoad: function (options) {
    console.log(options)
    let pid=Number(options.pid)
    this.setData({
      pid:pid
    })
    console.log(typeof pid,pid)
    let url='https://api-hmugo-web.itheima.net/api/public/v1/goods/search'
    let params={
      cid:pid,
      pagesize:7
    }
    let promise=getRequest(url,params)
    promise.then((res)=>{
      let pagenum=Number(res.data.message.pagenum)
      this.setData({
        goodsProduct:res.data.message.goods,
        total:res.data.message.total,
        pagenum:pagenum
      })
      console.log(res)
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

渲染产品至页面上

 <view class="goodsDetail">
        <view class="everyDetail" wx:for="{{goodsProduct}}" wx:key="index">
            <!-- 左边图片 -->
            <view class="productLeft">
             <image class="productPic" mode="widthFix" src="{{item.goods_small_logo}}" />
            </view>
            <!-- 右边名称，价格 -->
            <view class="productRight">
                <view class="productName">{{item.goods_name}}</view>
                <view class="goodsPrice">
                    <text> ￥{{item.goods_price}}</text>
                    <!-- <text class="goodsNum">{{item.goods_number}}</text> -->
                </view>
            </view>
        </view>
    </view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

步骤3：上拉继续加载

   onReachBottom: function () {
    // 继续加载数据
    //总条目数量： total ；每页的数目7，页码pagenum
    let total=this.data.total//总数量
    let pagenum=this.data.pagenum//当前页码
    // 总页码树=Math.ceil(total/7)
    let bigNum=Math.ceil(total/7)
    // 继续加载
    console.log(typeof bigNum,bigNum)
    if(pagenum<bigNum){
      console.log('继续加载')
      let url='https://api-hmugo-web.itheima.net/api/public/v1/goods/search'
      let params={
        cid:this.data.pid,
        pagesize:7,
        pagenum:pagenum
      }
      let promise=getRequest(url,params)
      promise.then((res)=>{
        // console.log(res)
        this.setData({
          goodsProduct:this.data.goodsProduct.concat(res.data.message.goods),
          total:res.data.message.total,
          pagenum:pagenum
        })
      })
      // console.log(pagenum)
      pagenum=pagenum+1
      // console.log(pagenum)
      this.setData({
        pagenum:pagenum
      })
    }
    // 判断当前页码是否为最后一页
    if(pagenum>=bigNum){
      console.log('已经加载完毕')
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

点击产品进入详情页

  showDetail:function(e){
    // console.log(e)
    let id=Number(e.currentTarget.dataset.goodsid)
    console.log(id,typeof id)
    wx.navigateTo({
      url: '../../pages/detail/detail?goodsid='+id
    })
  }
1
2
3
4
5
6
7
8