微信小程序实战篇-商品详情页(二)

今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~

![sku选着.png](http://upload-images.jianshu.io/upload_images/1750086-b95548b9486020a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

这个布局难点是需要绘制一个阴影背景、弹出的动画、购买数量加减的逻辑以及图片如何高于弹出框

代码的实现


  1. detail.wxml

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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,微信小程序提供模板template,可以在模板中定义代码片段,然后在不同地方调用,这里面就引用了名为quantity的代码块,这样引用的好处和css样式引用一样,增加代码发复用率,引用方式如下,is后面是模板的名字,data放入模板中要用到的数据

    1
    2
    3
    4
    5
    6
    7
    //自定义的模板
    <template name="msgItem">
    <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
    </view>
    </template>
    1
    2
    //引用模板
    <template is="msgItem" data="{{...item}}"/>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    //数据
    Page({
    data: {
    item: {
    index: 0,
    msg: 'this is a template',
    time: '2016-09-15'
    }
    }
    })
  2. detail.wxss

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    /* 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样式

    1. 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倍距离移动到本身的位置

    3. transition 过度转变transition : property duration timing-function delay;

      • property : 制定css属性的名字,all代表所有属性都获得过度效果

      • duration : 过度时间,必须有值,否则动画无效果

      • timing-function : 允许一个过渡效果,以改变其持续时间的速度 ease规定慢速开始,然后变快,然后慢速结束的过渡效果

      • delay :推迟动画的时间

        transition: all 0.4s ease;意思是全部属性执行动画在0.4s之内,开始慢速然后变快,最后慢速结束

  3. detail.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    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都有对应的引入语法,大家一定要区分开,好了,今天就到这,祝大家周末愉快~


1.如果本文帮到了您,不妨点一下右下角的 分享到 按钮。
2.除非注明,本博文章均为原创,转载请以链接形式标明本文地址。
3.本博文章只代表博主当时的观点或结论,与博主公司没有任何关系。