附录6-2 黑马优购项目-分包(子页面)

Suyuoa

于 2024-05-02 07:29:45 发布

阅读量698

点赞数 20

分类专栏：微信小程序开发文章标签： apache java 数据库

本文链接：https://blog.csdn.net/potato123232/article/details/138378569

版权

微信小程序开发专栏收录该内容

36 篇文章 0 订阅

订阅专栏

3 子页面 subpackage_search

1 子页面goods_detail

goods_detail分为三个区域，从上到下依次是轮播图区域，商品信息区域，富文本区域(富文本也是描述商品信息的，格式为html)，尾部区域

商品信息区域到尾部区域之间都是富文本区域

尾部区域的店铺按钮和立即购买按钮是不生效的。当屏幕过宽的时候尾部的样式会变得不是很好看

1.1 注册分包

为了让小程序初次加载更迅速些，所有不必要的加载都进行后置，所以所有的子页面都放入分包

首先在app.json中注册分包goods_detail

1.2 商品信息接口

get请求 https://api-hmugo-web.itheima.net/api/public/v1/goods/detail?goods_id=57335 携带参数为goods_id。根据不同的id会反给你不同的商品信息

下面的返回的信息，其中

goods_name 是商品名称
pics是轮播图的内容，pics中我们只用到pics_big(大图像)
goods_price是商品价格
goods_introduce是富文本

{
    "message": {
        "goods_id": 57335,
        "cat_id": 998,
        "goods_name": "美固MOBICOOL车载冰箱 T07-DC 车家两用冷热箱、食品、药品、化妆品都能带上了、本款产品内不含家用电源。",
        "goods_price": 278,
        "goods_number": 100,
        "goods_weight": 100,
        "goods_introduce": "<div class=\"lazyimg\"><p><img data-src=\"//image.suning.cn/uimg/sop/commodity/399769006889279906228700_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/399769006889279906228700_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/654360869939069238441700_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/654360869939069238441700_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/458231515172278605489700_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/458231515172278605489700_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/697839578176502965261400_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/697839578176502965261400_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/190683173119108156169582_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/190683173119108156169582_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/294903586100164627939050_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/294903586100164627939050_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/103472534756901181865680_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/103472534756901181865680_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/805500131583758599364200_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/805500131583758599364200_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/577612567160055560723350_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/577612567160055560723350_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/153546981089136065823620_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/153546981089136065823620_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/113716087641270356293580_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/113716087641270356293580_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/167422637859460106168700_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/167422637859460106168700_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/151090348110407049144964_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/151090348110407049144964_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/200707281851393860744200_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/200707281851393860744200_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/336352038155177012141030_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/336352038155177012141030_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/144130317014815003088729_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/144130317014815003088729_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/547912705166063680162600_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/547912705166063680162600_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/692370576184906820321970_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/692370576184906820321970_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/116698756492954924810140_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/116698756492954924810140_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/185533638817213173192438_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/185533638817213173192438_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/154373261718208805823831_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/154373261718208805823831_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/124667485027954490386600_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/124667485027954490386600_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/137387238411229461996210_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/137387238411229461996210_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/102089470788696198967200_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/102089470788696198967200_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/656748749205480838695730_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/656748749205480838695730_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/690211487568645352358000_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/690211487568645352358000_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/180071257413016422915768_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/180071257413016422915768_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/190909621174839343248400_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/190909621174839343248400_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/646705531127068740275320_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/646705531127068740275320_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/676173648335193945671500_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/676173648335193945671500_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"><img data-src=\"//image.suning.cn/uimg/sop/commodity/212333783613483762143176_x.jpg?from=mobile&amp;format=80q.webp\" alt=\"\" src=\"//image.suning.cn/uimg/sop/commodity/212333783613483762143176_x.jpg?from=mobile&format=80q.webp\" width=\"100%\" height=\"auto\"></p></div>",
        "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_800x800.jpg",
        "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_400x400.jpg",
        "goods_state": 2,
        "is_del": "0",
        "add_time": 1516662802,
        "upd_time": 1516662802,
        "delete_time": null,
        "hot_mumber": 0,
        "is_promote": false,
        "cat_one_id": 962,
        "cat_two_id": 981,
        "cat_three_id": 998,
        "goods_cat": "962,981,998",
        "pics": [
            {
                "pics_id": 234767,
                "goods_id": 57335,
                "pics_big": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_800x800.jpg",
                "pics_mid": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_400x400.jpg",
                "pics_sma": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_200x200.jpg",
                "pics_big_url": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_800x800.jpg",
                "pics_mid_url": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_400x400.jpg",
                "pics_sma_url": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_1_200x200.jpg"
            },
            {
                "pics_id": 234768,
                "goods_id": 57335,
                "pics_big": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_800x800.jpg",
                "pics_mid": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_400x400.jpg",
                "pics_sma": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_200x200.jpg",
                "pics_big_url": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_800x800.jpg",
                "pics_mid_url": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_400x400.jpg",
                "pics_sma_url": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_2_200x200.jpg"
            },
            {
                "pics_id": 234769,
                "goods_id": 57335,
                "pics_big": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_800x800.jpg",
                "pics_mid": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_400x400.jpg",
                "pics_sma": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_200x200.jpg",
                "pics_big_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_800x800.jpg",
                "pics_mid_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_400x400.jpg",
                "pics_sma_url": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_3_200x200.jpg"
            },
            {
                "pics_id": 234770,
                "goods_id": 57335,
                "pics_big": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_800x800.jpg",
                "pics_mid": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_400x400.jpg",
                "pics_sma": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_200x200.jpg",
                "pics_big_url": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_800x800.jpg",
                "pics_mid_url": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_400x400.jpg",
                "pics_sma_url": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_4_200x200.jpg"
            },
            {
                "pics_id": 234771,
                "goods_id": 57335,
                "pics_big": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_800x800.jpg",
                "pics_mid": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_400x400.jpg",
                "pics_sma": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_200x200.jpg",
                "pics_big_url": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_800x800.jpg",
                "pics_mid_url": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_400x400.jpg",
                "pics_sma_url": "http://image3.suning.cn/uimg/b2c/newcatentries/0000000000-000000000150912194_5_200x200.jpg"
            }
        ],
        "attrs": [
            {
                "goods_id": 57335,
                "attr_id": 8519,
                "attr_value": "T07",
                "add_price": 0,
                "attr_name": "主体-型号",
                "attr_sel": "only",
                "attr_write": "manual",
                "attr_vals": "Q6"
            },
            {
                "goods_id": 57335,
                "attr_id": 16528,
                "attr_value": "冷暖冰箱",
                "add_price": 0,
                "attr_name": "功能参数-制冷类型",
                "attr_sel": "only",
                "attr_write": "manual",
                "attr_vals": "冷暖冰箱"
            },
            {
                "goods_id": 57335,
                "attr_id": 16529,
                "attr_value": "7升",
                "add_price": 0,
                "attr_name": "规格-容量",
                "attr_sel": "only",
                "attr_write": "manual",
                "attr_vals": "12升"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

1.3 浏览图像

点击轮播图后会展示大图像

大图像可以左右拖拽从而切换轮播图的其他图像

每一个轮播图给一个bindtip事件，事件函数名称为previewImage，内容如下

首先整你此次要预览的所有图像，也就是轮播图中的所有图像，搞一个列表。之后调用方法wx.previewImage()，其中current参数是你当前展示哪张图，urls是你所有要展示的图像。剩下就不用管了，微信会给你弄好

1.4 商品详情

商品的详情是一段富文本，是由后端提供的html

1.5 购物车数量提示

这里是数量提示使用css做的

1.6 源码

wxml

<!--subpackage_goods_detail/goods_detail.wxml-->
<!-- <text>subpackage_goods_detail/goods_detail.wxml</text><br/> -->
<!-- <text>goods_detail页{{query.goods_id}}</text> -->

<!-- 这里加if是为了断网，或者后台有问题的时候，不显示东西 -->
<view  class="all" wx:if="{{goods_info.goods_name}}">
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000">
    <swiper-item wx:for="{{goods_info.pics}}" wx:key="index">
      <image src="{{item.pics_big}}" bindtap="previewImage" data-pic_url="{{item.pics_big}}" />
    </swiper-item>
  </swiper>

  <view class="goods-info-box">
    <view class="price">￥{{goods_info.goods_price}}</view>
    <view class="goods-info-body">
      <view class="goods-name">{{goods_info.goods_name}}</view>
      <view class="favi">
        <image src="../src/not_collect_icon.png" mode="" style="width:18px;height:18px;" />
        <text>收藏</text>
      </view>
    </view>
    <view class="yf">快递:免运费</view>
  </view>

  <rich-text nodes="{{goods_info.goods_introduce}}" />

  <view class="goods_nav">
  <view class="icon_view">
    <image src="../src/shop.png" mode=""/>
    <view>店铺</view>
  </view>
  <view class="icon_view" bindtap="go_to_cart">
    <view class="cart_num">{{cart_shop_total}}</view>
    <image src="../src/tab_icons/cart.png" mode=""/>
    <view>购物车</view>
  </view>
  <view class="btn_group">
    <view class="add_into_cart btn" bindtap="goods_detail_add_cart_list">加入购物车</view>
    <view class="buy_now btn">立即购买</view>
  </view>
</view>
</view>

wxss

/* subpackage_goods_detail/goods_detail.wxss */

.all {
  padding-bottom: 80rpx;
}

swiper {
  height:750rpx;
}

swiper image {
  width:100%;
  height:100%;
}

.goods-info-box {
  padding:10px;
  padding-right:0;
}

.goods-info-box .price {
  color: #c00000;
  font-size:18px;
  margin:10px 0;
}

.goods-info-box .goods-info-body {
  display:flex;
  justify-content: space-between;
}

.goods-info-box .goods-info-body .goods-name {
  font-size:13px;
  padding-right:10px;
}

.goods-info-box .goods-info-body .favi {
  width:120px;
  font-size:12px;
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items:center;
  border-left:1px solid #efefef;
  color:gray;
}

.goods-info-box .yf {
  margin:10px 0;
  font-size:12px;
  color:gray;
}

.goods_nav {
  position: fixed;
  display: flex;
  justify-content: space-between;
  width:100%;
  height:80rpx;
  background-color: white;
  position: fixed;
  bottom:0px;
  padding:5px 1rem;
}

.goods_nav .icon_view {
  position: relative;
  width:40px;
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  font-size:10px;
  color:gray;
}

.goods_nav image {
  width:50rpx;
  height:50rpx;
}

.goods_nav .btn {
  width:50%;
  color:white;
  line-height:80rpx;
  text-align: center;
  font-size:30rpx;
}

.goods_nav .add_into_cart {
  border-radius: 30rpx 0 0 30rpx;
  background-color:rgb(253, 0, 2);
}

.goods_nav .buy_now {
  border-radius: 0 30rpx 30rpx 0;
  background-color:rgb(253, 164, 3);
}

.btn_group {
  display: flex;
  width:60%;
  padding-right:50rpx;
}

.cart_num {
  position: absolute;
  right:-10rpx;
  top:-10rpx;
  width:35rpx;
  height:35rpx;
  text-align: center;
  line-height: 35rpx;
  border-radius: 35rpx;
  background-color: red;
  font-size:30rpx;
  color:white;
}

// subpackage_goods_detail/goods_detail.js
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../store/store.js'
const App = getApp()

Page({
  // 向购物车中添加商品对象
  goods_detail_add_cart_list() {
    const goods_obj = {
      goods_id:this.data.goods_info.goods_id,
      goods_name:this.data.goods_info.goods_name,
      goods_price:this.data.goods_info.goods_price,
      goods_count:1,
      goods_small_logo:this.data.goods_info.goods_small_logo,
      goods_state:true
    }

    this.add_cart_obj(goods_obj)
  },
  // 跳转到主页的购物车tabBar
  go_to_cart() {
    wx.switchTab({
      url: '/pages/cart/cart',
    })
    this.set_cart_tabBar_badge()
  },
  // 预览图像
  previewImage(e) {
    let pic_urls = []
    for (let i in this.data.goods_info.pics) {
      pic_urls = [...pic_urls,this.data.goods_info.pics[i].pics_big]
    }

    wx.previewImage({
      current:e.target.dataset.pic_url,
      urls: pic_urls,
      fail:(val)=>{
        console.log('图像预览错误/n',val)
      }
    })
  },
  // 请求商品信息
  get_goods_detail() {
    wx.request({
      url:App.base_url + '/api/public/v1/goods/detail?goods_id=' + this.data.query.goods_id,
      method:'GET',
      success:(val) => {
        // 解决图片之间的缝隙与webp格式的图片无法在ios设备上展示的问题
        val.data.message.goods_introduce = val.data.message.goods_introduce.replace(/<img /g,'<img style="display:block;"').replace(/webp/g,'jpg')
        this.setData({'goods_info':val.data.message})
      },
      fail:(val)=>{
        console.log(val)
      }
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    query:{},
    goods_info:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 拿从其他页面获取的参数
    this.setData({'query':options})
    // 拿全局数据
    this.storeBindings = createStoreBindings(this,{
      store,
      fields:['cart_list','cart_shop_total'],
      actions:['add_cart_obj','set_cart_tabBar_badge']
    })
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    // 请求商品信息
    this.get_goods_detail()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2 子页面goods_list

goods_list上只有商品的缩略内容。点击goods_list中的条目就会跳转到goods_detail。goods_list中有下拉刷新和上拉触底刷新

2.1 注册分包

2.2 商品列表接口

https://api-hmugo-web.itheima.net/api/public/v1/goods/search get请求发送四个参数

query是种类名，query是从上一个页面传递过来的参数
cid(category_id)是种类id，cid是从上一个页面传递过来的参数
pagenum是当前页码，默认为1
pagesize是一次显示几条

获得相应结果如下

{
    "message": {
        "total": 5,
        "pagenum": "1",
        "goods": [
            {
                "goods_id": 43983,
                "cat_id": 5,
                "goods_name": "Amoi夏新曲面电视机55英寸 4K全高清安卓系统智能语音无线WiFi网络 48/50蓝光夜晶3D数字彩电 家用超薄窄边",
                "goods_price": 3078,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "",
                "goods_small_logo": "",
                "add_time": 1516509839,
                "upd_time": 1516509839,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43982,
                "cat_id": 5,
                "goods_name": "TCL 65Q960C 65英寸 哈曼卡顿 人工智能 金属超薄 64位34核 4K+HDR 原色量子点 曲面电视（灰色）",
                "goods_price": 9988,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000826147951_1_800x800.jpg",
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000826147951_1_400x400.jpg",
                "add_time": 1516509836,
                "upd_time": 1516509836,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43972,
                "cat_id": 5,
                "goods_name": "红麒 32英寸电视 底座+上门安装调试 费用产品(本店电视安装专用)智能电视 曲面电视 高清（1366×768）",
                "goods_price": 120,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070164812-000000000705355314_1_800x800.jpg",
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070164812-000000000705355314_1_400x400.jpg",
                "add_time": 1516509757,
                "upd_time": 1516509757,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43971,
                "cat_id": 5,
                "goods_name": "海尔(Haier)LQ55AL88S51 55英寸4K超高清智能网络曲面电视 语音智能遥控",
                "goods_price": 3999,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000646151601_1_800x800.jpg",
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000646151601_1_400x400.jpg",
                "add_time": 1516509754,
                "upd_time": 1516509754,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            },
            {
                "goods_id": 43970,
                "cat_id": 5,
                "goods_name": "Amoi夏新曲面电视机32英寸 特价 智能无线WiFi网络 曲屏3d蓝光数字电视 高清LED液晶彩电 30显示器卧室家用",
                "goods_price": 1059,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070161385-000000000621507039_2_800x800.jpg",
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070161385-000000000621507039_2_400x400.jpg",
                "add_time": 1516509726,
                "upd_time": 1516509726,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 1,
                "cat_two_id": 3,
                "cat_three_id": 5
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

2.3 下拉刷新

首先在goods_list.json中允许下拉刷新

然后在goods_list.js中定义下拉刷新函数。每次下拉刷新会让pagenum+1，然后把新的数据放在最上方

我在getGoodsList中有定义，如果isTop为true就将新得到的数据放在列表的头部，如果isTop为false就将新得到的数据放在列表的尾部

2.4 上拉触底

上拉触底是默认生效的，所以我们不需要进行额外的配置，只需要在goods_list.js中定义上拉触底的方法就可以了

每次上拉触底后页码+1，之后将新获得的信息放在数组的尾部

2.5 跳转到goods_detail

在获取到的商品信息中会有goods_id，我们可以通过goods_id跳转到goods_detail

2.6 源码

wxml

<!--subpackage_goods_list/goods_list.wxml-->
<!-- <text>subpackage_goods_list/goods_list.wxml</text>
{{query.query}}
{{query.cid}} -->

<view class="goods-list">
  <block wx:for="{{goodsList}}" wx:key="index" >
    <goods_list_item goods_small_logo="{{item.goods_small_logo}}" goods_id="{{item.goods_id}}" goods_price="{{item.goods_price}}" goods_name="{{item.goods_name}}" bindtap="gotoDetail" data-goods_id="{{item.goods_id}}"></goods_list_item>
  </block>
</view>

wxss

/* subpackage_goods_list/goods_list.wxss */

.goods-item {
  display:flex;
  padding:10px 5px;
  border-bottom:1px solid #f0f0f0;
}

.goods-item .goods-item-left {
  margin-right:5px;
}

.goods-item .goods-item-left .goods-pic {
  width:100px;
  height:100px;
  display: block;
}

.goods-item .goods-item-right {
  display: flex;
  flex-direction:column;
  justify-content:space-between;
}

.goods-item .goods-item-right .goods-name {
  font-size:13px;
}

.goods-item .goods-item-right .goods-price {
  font-size:16px;
  color:#c00000;
}

// subpackage_goods_list/goods_list.js
const App = getApp()

Page({
  gotoDetail(e) {
    wx.navigateTo({
      url:'/subpackage_goods_detail/goods_detail?goods_id=' + e.target.dataset.goods_id
    })
  },
  getGoodsList() {
    if (this.data.total > this.data.pagenum * this.data.pagesize) {
      if (this.data.isLoading == false) {
        this.setData({'isLoading':true})
        wx.request({
          url:App.base_url + `/api/public/v1/goods/search?query=${this.data.query}&cid=${this.data.cid}&pagenum=${this.data.pagenum}&pagesize=${this.data.pagesize}`,
          method:'GET',
          success:(val) => {
            if (this.data.isTop == true) {
              this.setData({goodsList:[...val.data.message.goods,...this.data.goodsList]})
            }
            else {
              this.setData({goodsList:[...this.data.goodsList,...val.data.message.goods]})
            }
            this.setData({total:val.data.message.total})
          },
          fail:(val)=>{
            console.log(val)
          },
          complete:()=>{
            this.setData({'isLoading':false})
          }
        })
      }
    }
    
    
  },
  /**
   * 页面的初始数据
   */
  data: {
    query:'',
    cid:'',
    pagenum:1,
    pagesize:10,
    goodsList:[],
    total:9999,
    defaultPic:'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
    isTop:true,
    isLoading:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 拿从其他页面传递过来的数据
    this.setData({'query':options.query || ''})
    this.setData({'cid':options.cid || ''})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.getGoodsList()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    this.setData({'pagenum':this.data.pagenum + 1})
    this.setData({'isTop':true})
    this.getGoodsList()
    wx.stopPullDownRefresh()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.setData({'pagenum':this.data.pagenum + 1})
    this.setData({'isTop':false})
    this.getGoodsList()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3 子页面 subpackage_search

点击这个搜索组件会跳转到子页面subpackage_search

进入之后是这样的

可以搜索一些东西

点击搜索出来的条目后跳转到goods_detail

点击后清空搜索内容

可以看到搜索历史，点击垃圾桶图标可以清空搜索历史

点击搜索历史可以跳转到goods_list

3.1 注册分包

3.2 搜索建议接口

搜索建议就是这个

get请求 https://api-hmugo-web.itheima.net/api/public/v1/goods/qsearch 参数为query

响应

{
    "message": [
        {
            "goods_id": 50708,
            "goods_name": "小白熊奶瓶电子蒸汽消毒锅婴儿奶瓶消毒器高温蒸汽奶瓶消毒HL-0603"
        },
        {
            "goods_id": 50707,
            "goods_name": "yeaspring 婴儿奶瓶消毒器带烘干 多功能消毒锅 紫外线 奶瓶消毒柜 粉色"
        },
        {
            "goods_id": 50704,
            "goods_name": "格朗 奶瓶消毒锅 烘干器 尚品 GL X-6"
        },
        {
            "goods_id": 50702,
            "goods_name": "保修一年小白熊奶瓶消毒器带烘干/消毒锅HL-0681+多功能婴儿暖奶器HL-0607组合装"
        },
        {
            "goods_id": 50701,
            "goods_name": "安心妈妈奶瓶消毒器带烘干宝宝多功能蒸汽奶瓶消毒锅婴儿消毒柜"
        },
        {
            "goods_id": 50700,
            "goods_name": "小白熊奶瓶消毒器HL-0603 宝宝煮奶瓶消毒锅 婴儿奶瓶消毒器"
        },
        {
            "goods_id": 50699,
            "goods_name": "舒氏奶瓶消毒器 树枝状蒸汽通道消毒锅 环绕式杀菌智能烘干"
        },
        {
            "goods_id": 50698,
            "goods_name": "【新品上市】格朗奶瓶消毒器烘干蒸汽消毒锅 婴儿多功能宝宝消毒柜 GL X-11"
        },
        {
            "goods_id": 50697,
            "goods_name": "小白熊婴儿奶瓶消毒器带烘干婴儿奶瓶消毒锅小白熊奶瓶消毒 HL-0681"
        },
        {
            "goods_id": 50696,
            "goods_name": "小白熊 液晶版奶瓶消毒器 带烘干婴儿消毒锅 HL-0871"
        },
        {
            "goods_id": 50695,
            "goods_name": "飞利浦新安怡(AVENT)3合1电子蒸汽消毒锅"
        },
        {
            "goods_id": 50694,
            "goods_name": "Yeaspring宝宝奶瓶消毒器带烘干 消毒锅紫外线奶瓶消毒柜 内置烘干功能 蓝色"
        },
        {
            "goods_id": 50693,
            "goods_name": "phyll必尔紫外线婴儿奶瓶消毒器玩具宝宝消毒柜带烘干韩国进口多功能消毒锅"
        },
        {
            "goods_id": 50692,
            "goods_name": "bellecare宝宝奶瓶暖奶消毒器带烘干煮奶瓶锅消毒锅婴儿蒸汽杀菌不锈钢全自动烘干机"
        },
        {
            "goods_id": 50691,
            "goods_name": "【苏宁自营】 海尔（Haier）奶瓶消毒器 奶瓶奶嘴消毒 婴儿消毒锅 蒸煮温食 HBS-C03"
        },
        {
            "goods_id": 50690,
            "goods_name": "小白熊奶瓶消毒柜宝宝消毒锅 婴儿紫外线奶瓶消毒器带烘干HL-0636"
        },
        {
            "goods_id": 50689,
            "goods_name": "Goodbaby 好孩子 奶瓶蒸汽消毒锅 嫩芽绿"
        },
        {
            "goods_id": 50687,
            "goods_name": "新贝奶瓶消毒器带烘干 XB-8600 宝宝多功能暖奶蒸汽消毒锅婴儿消毒柜"
        },
        {
            "goods_id": 50686,
            "goods_name": "【赠13件】小白熊 宝宝奶瓶消毒器带烘干 奶瓶蒸汽消毒锅大容量HL-0681"
        },
        {
            "goods_id": 50685,
            "goods_name": "【苏宁自营】GL 格朗婴儿奶瓶消毒锅带烘干 多功能蒸气消毒锅 大容量宝宝消毒器 尚品X-6"
        }
    ],
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}

3.3 历史记录

历史记录保存在本地存储中，当输入发生改变的时候会触发节流阀，先把搜索内容保存在历史记录中，然后判断是否搜索内容为空，如果不为空就显示清空按钮。判断是否显示清空按钮后获取查询列表

3.4 聚焦输入框

输入框是由input_focus这个变量控制的，点完清空按钮后及时给true也不会立刻聚焦，所以需要给个定时器，让他异步，这样就能聚焦了

在wxml中input可以用model:进行双向绑定数据

3.5 源码

wxml

<!--subpackage_search/search.wxml-->
<!-- 最上面的搜索盒子 -->
<view class="search-box">
  <view class="my-search-box">
    <icon class="icon-small" type="search" size="17"></icon>
    <input type="text" placeholder="请输入搜索内容" confirm-type="search" bindinput="change_search_content" model:value="{{search_content}}" model:focus="{{input_focus}}"/>
    <icon class="icon-small" type="clear" size="30" bindtap="clear_search_content" wx:if="{{show_clear==true}}"></icon>
  </view>
</view>
<!-- 搜索建议 -->
<view class="sugg-list">
  <view class="sugg-item" wx:for="{{searchResults}}" wx:key="goods_id" bindtap="go_detail" data-goods_id="{{item.goods_id}}">
    <view class="goods-name" data-goods_id="{{item.goods_id}}">{{item.goods_name}}</view>
    <view class="arrow" data-goods_id="{{item.goods_id}}"></view>
  </view>
</view>
<!-- 搜索历史 -->
<view class="history-box" wx:if="{{searchResults == null}}">
  <view class="history-title">
    <text>搜索历史</text>
    <image src="../src/trash_icon.png" mode="aspectFit" bindtap="clearHistory"/>
  </view>
  <view class="history-list">
    <view wx:for="{{historyList}}" wx:key="index" bindtap="go_to_goodslist" data-query="{{item}}">{{item}}</view>
  </view>
</view>

wxss

/* subpackage_search/search.wxss */
/* 最上面的搜索盒子 */
.search-box {
  background-color: #c00000;
  height:50px;
  padding:0 10px;
  display:flex;
  align-items: center;

  position:sticky;
  top:0;
  z-index:999;
}

.my-search-box {
  height:36px;
  background-color: #fff;
  border-radius: 15px;
  width:100%;
  display:flex;
  align-items:center;
  padding-left:10px;
  /* justify-content:center; */
}

.my-search-box input {
  width:80%;
  font-size:15px;
  margin-left:5px;
}

.my-search-box icon {
  z-index: 999;
}

/* 搜索建议 */
.sugg-list {
  padding:0 5px;
}

.sugg-list .sugg-item {
  font-size:12px;
  padding:13px 0;
  border-bottom:1px solid #efefef;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sugg-list .goods-name {
  white-space:nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  margin-right:20px;
}

.sugg-list .arrow{
  width: 10px;
  height: 10px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  position: absolute;
  right: 20rpx;
  transform: rotate(45deg);
  margin-top:10rpx;
}

/* 搜索历史 */
.history-box {
  padding:0 5px;
}

.history-box .history-title {
  display: flex;
  justify-content: space-between;
  height:40px;
  align-items:center;
  font-size:13px;
  border-bottom:1px solid #efefef;
}

.history-box .history-title image {
  width:20px;
  height:20px;
}

.history-box .history-list {
  display:flex;
  flex-wrap:wrap;
}

.history-box .history-list view{
  height:30px;
  padding:0px 10px;
  background-color: rgb(250,250,250);
  margin-top:5px;
  margin-right:5px;
}

// subpackage_search/search.js
const App = getApp()

Page({
  // 点击搜索历史跳转到商品列表
  go_to_goodslist(e) {
    wx.navigateTo({url:'/subpackage_goods_list/goods_list?query=' + e.target.dataset.query})
  },
  // 清除搜索记录
  clearHistory() {
    this.setData({historyList:[]})
    wx.setStorageSync('historyList', [])
  },
  // 点击查询结果后跳转到商品详情页
  go_detail(e) {
    wx.navigateTo({url:'/subpackage_goods_detail/goods_detail?goods_id=' + e.target.dataset.goods_id})
  },
  // 获取查询建议列表
  getSearchList() {
    if (this.search_content == '') {
      this.searchResults = []
    }
    else {
      wx.request({
        url:App.base_url + '/api/public/v1/goods/qsearch',
        method:'GET',
        data:{
          query:this.data.search_content
        },
        success:(val) => {
          this.setData({searchResults:val.data.message})
        },
        fail:(val)=>{
          console.log(val)
        }
      })
    }
  },
  // 输入框改变输入内容的时候触发的函数，但按叉icon无效
  change_search_content(e) {
    clearTimeout(this.timer)
    this.timer = setTimeout(()=>{
      this.setData({search_content:e.detail.value})

      try {
        this.setData({historyList:[e.detail.value,...this.data.historyList.filter((item)=>item!=e.detail.value)]})
      }
      catch {
        this.setData({historyList:[e.detail.value]})
      }
      
      wx.setStorageSync('historyList', this.data.historyList)

      if (e.detail.value.length == 0) {
        this.setData({show_clear:false})
      }
      else {
        this.setData({show_clear:true})
      }
      this.getSearchList()
    },500)
  },
  // 被叉icon绑定的清空input函数
  clear_search_content() {
    this.setData({search_content:''})
    this.setData({show_clear:false})
    this.setData({input_focus:false})
    setTimeout(()=>{
      this.setData({input_focus:true})
    })
    this.getSearchList()
  },
  /**
   * 页面的初始数据
   */
  data: {
    search_content:'',
    input_focus:true,
    show_clear:false,
    searchResults:null,
    historyList:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 获取本地存储的搜索历史
    this.setData({'historyList':wx.getStorageSync('historyList')})
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

4 子页面choose_address

choose_address是选择地址的页面，在购物车中点击这里进入

这里的地址是我写死的，管理和新增地址的按钮都是假的

4.1 微信中内置的选择地址页

选择地址其实是在wx中写好的页面 wx.chooseAddress(Object object) | 微信开放文档

我们简单用一下

在app.json中添加这样一个节点

js加上这样一个方法

我没进行使用的原因如下

选择地址在微信小程序中很少用到，我们可以想一下自己用的小程序，用的最多的应该是提交什么信息，比如你要进入某个地方，你需要做个申请，这个时候用小程序。对于我来讲第二多的就是餐厅扫码点菜。大多数小程序都是用不到选择地址这一页的，所以不用过多了解
这个默认色调与小程序的色调不太搭，在调整样式的时候也会麻烦些。与其用内置的，不如重新写一个

4.2 源码

其余就没有什么东西了，地址信息是放在本地存储中的

wxml

<!--subpackage_choose_address/choose_address.wxml-->
<!-- <text>subpackage_choose_address/choose_address.wxml</text> -->

<view class="address_item" bind:tap="return_cart" wx:for="{{address_list}}" wx:key="index" data-choosed_address="{{item}}">
  <text class="address_name"  data-choosed_address="{{item}}">{{item.username}}</text>
  <text  data-choosed_address="{{item}}">{{item.phone}}</text>
  <view  data-choosed_address="{{item}}">{{item.address_detail}}</view>
</view>

<view class="footer">
  <button class="manage_btn">管理</button>
  <button class="new_address_btn">新增地址</button>
</view>

wxss

/* subpackage_choose_address/choose_address.wxss */

page {
  background-color: rgb(243,243,243);
}

/* 最下面的两个按钮 */
.footer {
  position: fixed;
  bottom:0px;
  display:flex;
  padding:50rpx;
  background-color: white;
}

.footer button{
  border-radius: 50rpx;
}

.footer .new_address_btn {
  width:100%;
  margin-left:20px;
  color:white;
  background: linear-gradient(to right, rgb(252,88,60), rgb(253,59,57))
}

.footer .manage_btn {
  border: 1px solid black;
}

/* 地址卡片 */
.address_item {
  padding:20px;
  margin:10px;
  border-radius: 10px;
  background-color: white;
  color:rgb(127,127,127);
}

.address_item .address_name {
  color:black;
  font-size:20px;
  font-weight: 700;
  margin-right:20px;
}

.address_item view {
  margin-top:10px;
}

// subpackage_choose_address/choose_address.js
Page({
  return_cart(e) {
    wx.setStorageSync('choosed_address', e.target.dataset.choosed_address)
    wx.switchTab({
      url:`/pages/cart/cart`,
    })
  },
  /**
   * 页面的初始数据
   */
  data: {
    address_list:[{'username':'张三','phone':'135****8888','address_detail':'广东省广州市珠海去新港中路888888号'},{'username':'李四','phone':'135****9999','address_detail':'广东省广州市珠海去新港中路99999号'}]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

Suyuoa

关注

20
点赞
踩
23

收藏

觉得还不错? 一键收藏
打赏
1
评论
附录6-2 黑马优购项目-分包(子页面)

首先整你此次要预览的所有图像，也就是轮播图中的所有图像，搞一个列表。我在getGoodsList中有定义，如果isTop为true就将新得到的数据放在列表的头部，如果isTop为false就将新得到的数据放在列表的尾部。goods_detail分为三个区域，从上到下依次是轮播图区域，商品信息区域，富文本区域(富文本也是描述商品信息的，格式为html)，尾部区域。上拉触底是默认生效的，所以我们不需要进行额外的配置，只需要在goods_list.js中定义上拉触底的方法就可以了。携带参数为goods_id。
复制链接

扫一扫