详情页

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，就可以使整个阴影铺满浏览器的窗口了

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