今天要講解商品詳情頁中sku的彈出選著框，這個(gè)涉及css動(dòng)畫樣式，css動(dòng)畫是新的知識點(diǎn)，我們之前并沒有接觸過，請大家做好筆記，我們要做的效果是醬紫的~

sku選著.png

這個(gè)布局難點(diǎn)是需要繪制一個(gè)陰影背景、彈出的動(dòng)畫、購買數(shù)量加減的邏輯以及圖片如何高于彈出框

代碼的實(shí)現(xiàn)

1. detail.wxml

<import src="/template/quantity/index.wxml" />
  <!-- sku選擇 -->
  <text bindtap="toggleDialog">請選擇購買數(shù)量</text>
  <view class="dialog {{ showDialog ? 'dialog--show' : '' }}">
    <view class="dialog__mask" bindtap="toggleDialog" />
    <view class="dialog__container">
      <view class="row">
         <image bindtap="closeDialog" class="image-close" src="../../images/detail/close.png"></image>
        <image class="image-sku" src="http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg"></image>
        <view class="column">
          <text class="sku-price">￥500</text>
          <text class="sku-title">庫存20件</text>
           <text class="sku-title">商品編碼：1456778788</text>
        </view>
      </view>
      <text class="border-line"></text>
      <view class="row">
        <text >購買數(shù)量</text>
        <view class="quantity-position">
          <template is="quantity" data="{{ ...quantity1, componentId: 'quantity1' }}" />
        </view>
      </view>
      <text class="border-line"></text>

      <button class="button-green" bindtap="addCar" formType="submit">加入購物車</button>
      <button class="button-red" formType="submit">立即購買</button>
    </view>
  </view>

這里面要重點(diǎn)講解的是<template>，微信小程序提供模板template，可以在模板中定義代碼片段，然后在不同地方調(diào)用，這里面就引用了名為quantity的代碼塊，這樣引用的好處和css樣式引用一樣，增加代碼發(fā)復(fù)用率，引用方式如下，is后面是模板的名字，data放入模板中要用到的數(shù)據(jù)

//自定義的模板
<template name="msgItem">
 <view>
   <text> {{index}}: {{msg}} </text>
   <text> Time: {{time}} </text>
 </view>
</template>

//引用模板
<template is="msgItem" data="{{...item}}"/>

//數(shù)據(jù)
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

2. detail.wxss

/* sku選擇 */
.dialog__mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.7);
  display: none;
}
.dialog__container {
  position: fixed;
  bottom: 0;
  width: 750rpx;
  background: white;
  transform: translateY(150%);
  transition: all 0.4s ease;
  z-index: 11;
}
.dialog--show .dialog__container {
  transform: translateY(0);
}
.dialog--show .dialog__mask {
  display: block;
}
.image-sku {
  width: 200rpx;
  height: 200rpx;
  z-index: 12;
  position: absolute;
  left: 20px;
  top: -30px;
  border-radius: 20rpx;
}
.image-close {
  width: 40rpx;
  height: 40rpx;
  position: fixed;
  right: 10rpx;
  top: 10rpx;
}
.column {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.border-line {
  width: 100%;
  height: 2rpx;
  display: inline-block;
  margin: 30rpx 0rpx;
  background-color: gainsboro;
  text-align: center;
}
.sku-title {
  position: relative;
  left: 300rpx;
  margin: 1rpx;
}
.sku-price {
  color: red;
  position: relative;
  left: 300rpx;
  margin: 1rpx;
}
.row .quantity-position {
  position: absolute;
  right: 30rpx;
}

今天重點(diǎn)講解wxss樣式

1. position 位置屬性

   • absolute 生成絕對定位的元素，相對于父元素進(jìn)行定位元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
   • fixed 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。
     元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。
   • relative 生成相對定位的元素，相對于其正常位置進(jìn)行定位。

   陰影部分要鋪滿屏幕所以用到了fixed屬性，把上下左右的距離都設(shè)置為0，就可以使整個(gè)陰影鋪滿瀏覽器的窗口了

2. transform 轉(zhuǎn)換

   • transform : scale(x,y); 縮放
   • transform : rotate(deg); 旋轉(zhuǎn) deg（度）
   • transform : skew( x ,y); 傾斜
   • transform : scale(x,y); 縮放
   • transform : translateY(y); 位置移動(dòng)

sku選著欄從底部出來就是用到translateY屬性，代碼中設(shè)置150%->0,就是從本身的1.5倍距離移動(dòng)到本身的位置

3. ** transition** 過度轉(zhuǎn)變transition : property duration timing-function delay;
   • property : 制定css屬性的名字，all代表所有屬性都獲得過度效果
   • duration : 過度時(shí)間，必須有值，否則動(dòng)畫無效果
   • timing-function : 允許一個(gè)過渡效果，以改變其持續(xù)時(shí)間的速度 ease規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過渡效果
   • delay :推遲動(dòng)畫的時(shí)間

transition: all 0.4s ease;意思是全部屬性執(zhí)行動(dòng)畫在0.4s之內(nèi)，開始慢速然后變快，最后慢速結(jié)束

3. detail.js

var Temp = require('../../template/contract.js');
Page(Object.assign({}, Temp.Quantity,{
  data: {
    quantity1: {
      quantity: 10,
      min: 1,
      max: 20
    },
},
  //數(shù)量變化處理
  handleQuantityChange(e) {
    var componentId = e.componentId;
    var quantity = e.quantity;
  this.setData({
      {componentId}.quantity: quantity
    });
  }

這里我們要掌握以下幾點(diǎn)

1. require（）是引用別的地方的js代碼，這里就是引用contract.js里的js代碼
2. Object.assign，這個(gè)是js的屬性，定義是：從一個(gè)對象復(fù)制所有的屬性到另一個(gè)對象是一個(gè)常見的操作，這里就是把Temp.Quantity的數(shù)據(jù)和detail.js的數(shù)據(jù)合并到一起
3. handleQuantityChange 加減按鈕觸發(fā)的事件監(jiān)聽，每點(diǎn)擊加減按鈕，都會回調(diào)此方法

總結(jié)

今天的知識點(diǎn)難度有點(diǎn)大，大家可能需要點(diǎn)時(shí)間去消化，尤其是為了復(fù)用代碼，js、wxml、wxss都有對應(yīng)的引入語法，大家一定要區(qū)分開，好了，今天就到這，祝大家周末愉快~

上一篇：微信小程序?qū)崙?zhàn)篇-商品詳情頁（一）

下一篇：微信小程序?qū)崙?zhàn)篇-購物車

建了一個(gè)小程序技術(shù)交流群，想入群的讀者請加微信

小程序入群.png