項(xiàng)目六產(chǎn)品項(xiàng)目模塊開發(fā)任務(wù)三商品詳情頁(yè)面設(shè)計(jì)Productdetailspagedesign商品詳情頁(yè)是對(duì)商品進(jìn)行詳細(xì)描述介紹的頁(yè)面，詳情頁(yè)的設(shè)計(jì)極有可能會(huì)對(duì)用戶的購(gòu)買行為產(chǎn)生直接的影響。因此，商品詳情頁(yè)面的設(shè)計(jì)在美觀實(shí)用的基礎(chǔ)上，將表達(dá)的信息盡可能用直觀的視角展現(xiàn)出來(lái)。項(xiàng)目六產(chǎn)品項(xiàng)目模塊開發(fā)任務(wù)描述商品詳情頁(yè)輪播圖Page({data:{swiperList:['/images/goods1.jpg',

'/images/goods2.jpg',

'/images/goods3.jpg'],indicatorDots:true,autoplay:true,interval:2000,duration:1000,currentIndex:0//定義輪播圖當(dāng)前的索引值}

商品詳情頁(yè)的輪播圖用于播放商品的部分細(xì)節(jié)圖片，可以獲取商品輪播圖的數(shù)量以及當(dāng)前播放的圖片索引值。實(shí)現(xiàn)輪播圖切換時(shí)觸發(fā)Change事件，獲取當(dāng)前輪播圖的索引值。打開pages/goodsDetail/goodsDetail.js在data對(duì)象中定義輪播圖所需要的基礎(chǔ)數(shù)據(jù)。商品詳情頁(yè)標(biāo)題信息

打開pages/goodsDetail/goodsDetail.wxml頁(yè)面，實(shí)現(xiàn)商品詳情頁(yè)的標(biāo)題信息可以分成兩大容器，goodsinfo-top子容器包括了商品標(biāo)題和轉(zhuǎn)發(fā)圖標(biāo)。goods-sale子容器包括了價(jià)格和優(yōu)惠標(biāo)簽兩部分。使用iconfont圖標(biāo)庫(kù)

阿里巴巴提供了iconfont圖標(biāo)庫(kù)?？梢栽诠俜骄W(wǎng)站上將需要的圖標(biāo)放入購(gòu)物車，然后iconfont會(huì)為你打包你購(gòu)物車?yán)锏膱D標(biāo)，自動(dòng)生成一種新的字體，然后可以選擇下載到本地，在小程序項(xiàng)目中引入這種字體，這樣即便沒有網(wǎng)絡(luò)的情況也可以使用圖標(biāo)。使用iconfont圖標(biāo)庫(kù)

下載字體圖標(biāo)的css文件后，將css文件里的內(nèi)容可以放入到小程序項(xiàng)目的公共樣式文件app.wxss中。具體操作如下圖所示。

picker組件的使用屬性類型默認(rèn)值必填說(shuō)明header-textstring

否選擇器的標(biāo)題，僅安卓可用modestringselector否選擇器類型，包括五種類型。selector：普通選擇器，multiSelector：多列選擇器，time：時(shí)間選擇器，date：日期選擇器，region：省市區(qū)選擇器。disabledbooleanfalse否是否禁用bindcanceleventhandle

否取消選擇時(shí)觸發(fā)表picker組件的屬性

picker從底部彈起的滾動(dòng)選擇器。picker選擇器分為五種普通選擇器、多列選擇器、時(shí)間選擇器、日期選擇器和省市區(qū)選擇器。

picker組件的使用表mode屬性值屬性類型必填說(shuō)明rangearray/objectarray[]mode為selector或multiSelector時(shí)，range有效range-keystring

當(dāng)range是一個(gè)ObjectArray時(shí)，通過(guò)range-key來(lái)指定Object中key的值作為選擇器顯示內(nèi)容valuenumber0表示選擇了range中的第幾個(gè)（下標(biāo)從0開始）bindchangeeventhandle

value改變時(shí)觸發(fā)change事件，event.detail={value}

除了上述通用的屬性，對(duì)于不同的mode，picker擁有不同的屬性。普通選擇器：mode=selector。picker組件的使用Page({data:{pickerIndex:0,array:['紅色','黃色','粉色','白色'],arraycolor:['#FF0000','#FFFF00','#FFC0CB','#FFFFFF'],}})

接下來(lái)，使用picker組件，講解普通選擇器的使用方法與步驟。實(shí)現(xiàn)效果如下圖所示。商品詳情圖的實(shí)現(xiàn)<view

class="goods-detail">

<block>

<image

mode="widthFix"

src="/images/goodsDetail.jpg"></image>

</block></view>

商品詳情頁(yè)面的長(zhǎng)度不宜過(guò)長(zhǎng)，頁(yè)面長(zhǎng)度過(guò)長(zhǎng)會(huì)導(dǎo)致頁(yè)面加載速度變慢，特別是在手機(jī)端，會(huì)消耗大量的手機(jī)流量，也會(huì)讓用戶產(chǎn)生視覺疲勞。詳情頁(yè)切圖是指將制作好的一整張商品詳情頁(yè)使用工具進(jìn)行切片，分割成一小張一小張的圖片。切圖之后，圖片就會(huì)自上而下快速加載。打開pages/goodsDetail/goodsDetail.wxml頁(yè)面，實(shí)現(xiàn)頁(yè)面布局。商品詳情底部的實(shí)現(xiàn)<view

class="product-bottom"><view

class="bottom-nav"

bindtap="backTohome">

<view

class="iconfont

icon-home"></view>

<view>首頁(yè)</view></view><view

class="bottom-nav"

bindtap="onCall">

<view

class="iconfont

icon-weixin"></view>

<view>客服</view></view><view

class="bottom-nav"

bindtap="addToCart">

<text

class="badge"

wx:if="{{buyNum>0}}">{{buyNum}}</text>

<view

class="iconfont

icon-cart"></view>

<view>購(gòu)物車</view></view>

<view

class="add-cart"

bindtap="addCart">加入購(gòu)物車</view>

<view

class="add-buy">立即購(gòu)買</view></view>

打開pages/goodsDetail/goodsDetail.wxml頁(yè)面，實(shí)現(xiàn)頁(yè)面布局。商品詳情底部的實(shí)現(xiàn)定義段類型必填描述phoneNumberstring是需要撥打的電話號(hào)碼successfunction否接口調(diào)用成功的回調(diào)函數(shù)failfunction否接口調(diào)用失敗的回調(diào)函數(shù)completefunction否接口調(diào)用結(jié)束的回調(diào)函數(shù)wx.m