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

项目六产品项目模块开发任务三商品详情页面设计Productdetailspagedesign

商品详情页是对商品进行详细描述介绍的页面，详情页的设计极有可能会对用户的购买行为产生直接的影响。因此，商品详情页面的设计在美观实用的基础上，将表达的信息尽可能用直观的视角展现出来。项目六产品项目模块开发任务描述

商品详情页轮播图Page({data:{swiperList:[/images/goods1.jpg,/images/goods2.jpg,/images/goods3.jpg],indicatorDots:true,autoplay:true,interval:2000,duration:1000,currentIndex:0//定义轮播图当前的索引值}商品详情页的轮播图用于播放商品的部分细节图片，可以获取商品轮播图的数量以及当前播放的图片索引值。实现轮播图切换时触发Change事件，获取当前轮播图的索引值。打开pages/goodsDetail/goodsDetail.js在data对象中定义轮播图所需要的基础数据。

商品详情页标题信息打开pages/goodsDetail/goodsDetail.wxml页面，实现商品详情页的标题信息可以分成两大容器，goodsinfo-top子容器包括了商品标题和转发图标。goods-sale子容器包括了价格和优惠标签两部分。

使用iconfont图标库阿里巴巴提供了iconfont图标库。可以在官方网站上将需要的图标放入购物车，然后iconfont会为你打包你购物车里的图标，自动生成一种新的字体，然后可以选择下载到本地，在小程序项目中引入这种字体，这样即便没有网络的情况也可以使用图标。

使用iconfont图标库下载字体图标的css文件后，将css文件里的内容可以放入到小程序项目的公共样式文件app.wxss中。具体操作如下图所示。

picker组件的使用属性类型默认值必填说明header-textstring否选择器的标题，仅安卓可用modestringselector否选择器类型，包括五种类型。selector：普通选择器，multiSelector：多列选择器，time：时间选择器，date：日期选择器，region：省市区选择器。disabledbooleanfalse否是否禁用bindcanceleventhandle否取消选择时触发表picker组件的属性picker从底部弹起的滚动选择器。picker选择器分为五种普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。

picker组件的使用表mode属性值属性类型必填说明rangearray/objectarray[]mode为selector或multiSelector时，range有效range-keystring当range是一个ObjectArray时，通过range-key来指定Object中key的值作为选择器显示内容valuenumber0表示选择了range中的第几个（下标从0开始）bindchangeeventhandlevalue改变时触发change事件，event.detail={value}除了上述通用的属性，对于不同的mode，picker拥有不同的属性。普通选择器：mode=selector。

picker组件的使用Page({data:{pickerIndex:0,array:[红色,黄色,粉色,白色],arraycolor:[#FF0000,#FFFF00,#FFC0CB,#FFFFFF],}})接下来，使用picker组件，讲解普通选择器的使用方法与步骤。实现效果如下图所示。

商品详情图的实现view?class=goods-detail???block?image?mode=widthFix??src=/images/goodsDetail.jpg/image???/block/view商品详情页面的长度不宜过长，页面长度过长会导致页面加载速度变慢，特别是在手机端，会消耗大量的手机流量，也会让用户产生视觉疲劳。详情页切图是指将制作好的一整张商品详情页使用工具进行切片，分割成一小张一小张的图片。切图之后，图片就会自上而下快速加载。打开pages/goodsDetail/good