今天要讲解商品详情页中sku的弹出选着框,这个涉及css动画样式,css动画是新的知识点,我们之前并没有接触过,请大家做好笔记,我们要做的效果是酱紫的~
这个布局难点是需要绘制一个阴影背景、弹出的动画、购买数量加减的逻辑以及图片如何高于弹出框
代码的实现
1. 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