微信小程序开发项目实战（微课版）课件 6-2 课件-商品列表页面设计.pptx

项目六产品项目模块开发任务二商品列表页面设计Productlistpagedesign

相信大家在进行商城商品列表设计的时候，会有关于商品列表的相关页面，本章节主要讲述商品列表页设计与开发，商品列表页的框架如何选择，如何设计。所谓商品列表，为固定列表项的样式后，根据分页数据显示的多少，使用列表渲染方式，按照固定样式依次展示的页面。项目六产品项目模块开发任务描述

商品列表页的布局Page({??data:?{????goodsList:[{????????goodsImage:/images/goods1.jpg,????????goodsTitle:大花澳洲腊梅鲜花复古色云南昆明基地直发鲜花家用办公室水养,????????goodsPrice:88,????}]}})打开pages/goodsList/goodsList.js页面，定义基础数据，包括商品的图片、标题和价格，读者可以自行增加商品数据。

商品列表页的布局navigatorurl=/pages/goodsDetail/goodsDetailview?class=goods-item?wx:for={{goodsList}}?wx:key=id?image?class=goods-img?src={{item.goodsImage}}/imageview?class=goods-info??text?class=goods-title{{item.goodsTitle}}/text??text?class=goods-price￥{{item.goodsPrice}}/text??view?class=stars-cart??image?class=cart?src=/images/cart-active.png/image/view/view/view/navigator打开pages/goodsList/goodsList.wxml页面，作为商品列表页，使用wx:for循环读取goodsList数据，渲染到视图层。

自定义组件的创建//my-component.jsComponent({properties:{//组件的属性},data:{//组件的内部数据},methods:{//组件的方法}})//my-component.wxml在微信小程序中，自定义组件的基本结构包含两个文件：一个是js文件，用于管理组件的逻辑，一个是wxml文件，用于管理组件的视图。其中，js文件必须以Component函数定义一个组件，并将该函数暴露出去；wxml文件则需要使用标签包裹起来，并设置name属性作为组件名称。

自定义组件的创建定义段类型必填描述propertiesObjectMap否组件的对外属性，是属性名到属性设置的映射表dataObject否组件的内部数据，和properties一同用于组件的模板渲染observersObject否组件数据字段监听器，用于监听properties和data的变化methodsObject否组件的方法，包括事件响应函数和任意的自定义方法behaviorsStringArray否类似于mixins和traits的组件间代码复用机制createdFunction否组件生命周期函数-在组件实例刚刚被创建时执行，注意此时不能调用setDataattachedFunction否组件生命周期函数-在组件实例进入页面节点树时执行)readyFunction否组件生命周期函数-在组件布局完成后执行)movedFunction否组件生命周期函数-在组件实例被移动到节点树另一个位置时执行)detachedFunction否组件生命周期函数-在组件实例被从页面节点树移除时执行)relationsObject否组件间关系定义externalClassesStringArray否组件接受的外部样式类optionsObjectMap否一些选项（文档中介绍相关特性时会涉及具体的选项设置，这里暂不列举）lifetimesObject否组件生命周期声明对象pageLifetimesObject否组件所在页面的生命周期声明对象definitionFilterFunction否定义段过滤器，用于自定义组件扩展Component(Objectobject)创建自定义组件，接受一个Object类型的参数。

自定义组件的创建Component({properties:{text:{type:String,value:defaulttext}},methods:{changeText:function(){