微信小程序實戰篇-商品詳情頁（二）

轉載自：https://blog.csdn.net/u012927188/article/details/74745769

今天要講解商品詳情頁中sku的彈出選着框，這個涉及css動畫樣式，css動畫是新的知識點，我們之前並沒有接觸過，請大家做好筆記，我們要做的效果是醬紫的~

這個佈局難點是需要繪製一個陰影背景、彈出的動畫、購買數量加減的邏輯以及圖片如何高於彈出框

代碼的實現

detail.wxml

<import src="/template/quantity/index.wxml" />
  <!-- sku選擇 -->
  <text bindtap="toggleDialog">請選擇購買數量</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 >購買數量</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>

這裏面要重點講解的是，微信小程序提供模板template，可以在模板中定義代碼片段，然後在不同地方調用，這裏面就引用了名爲quantity的代碼塊，這樣引用的好處和css樣式引用一樣，增加代碼發覆用率，引用方式如下，is後面是模板的名字，data放入模板中要用到的數據

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

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

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

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;
}

今天重點講解wxss樣式

• position 位置屬性

• absolute 生成絕對定位的元素，相對於父元素進行定位元素的位置通過 “left”, “top”, “right” 以及
  “bottom” 屬性進行規定。

• fixed 生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 “left”, “top”, “right” 以及
  “bottom” 屬性進行規定。

• relative 生成相對定位的元素，相對於其正常位置進行定位。

  陰影部分要鋪滿屏幕所以用到了fixed屬性，把上下左右的距離都設置爲0，就可以使整個陰影鋪滿瀏覽器的窗口了
  2.transform 轉換

• transform : scale(x,y); 縮放

• transform : rotate(deg); 旋轉 deg（度）

• transform : skew( x ,y); 傾斜

• transform : scale(x,y); 縮放

• transform : translateY(y); 位置移動

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

• transition 過度轉變transition : property
• duration timing-function delay;
• property : 制定css屬性的名字，all代表所有屬性都獲得過度效果
• duration : 過度時間，必須有值，否則動畫無效果
• timing-function : 允許一個過渡效果，以改變其持續時間的速度 ease規定慢速開始，然後變快，然後慢速結束的過渡效果
• delay :推遲動畫的時間
  transition: all 0.4s ease;意思是全部屬性執行動畫在0.4s之內，開始慢速然後變快，最後慢速結束
  detail.js

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

這裏我們要掌握以下幾點

1. require（）是引用別的地方的js代碼，這裏就是引用contract.js裏的js代碼
2. Object.assign，這個是js的屬性，定義是：從一個對象複製所有的屬性到另一個對象是一個常見的操作，這裏就是把Temp.Quantity的數據和detail.js的數據合併到一起
3. handleQuantityChange 加減按鈕觸發的事件監聽，每點擊加減按鈕，都會回調此方法

總結

今天的知識點難度有點大，大家可能需要點時間去消化，尤其是爲了複用代碼，js、wxml、wxss都有對應的引入語法，大家一定要區分開，好了，今天就到這，祝大家週末愉快~