微信小程序商城电商整套系列相关推荐：
1、
微信小程序开发页面顶部导航栏制作设计 [图]
2、微信小程序开发底部导航菜单栏的制作设计 [图]
3、
微信小程序开发广告轮播幻灯图制作设计 [图]
4、
微信小程序开发商城电商首页整体布局制作设计 [图]
5、
微信小程序开发分类页面栅格布局制作与设计 [图]
6、
微信小程序开发商品详情页中sku的弹出属性筛选选择框 [图]
7、
微信小程序商品正文详情页整体布局制作与设计 [图]
8、
微信小程序商城电商购物车页面制作与设计 [图]
9、
微信小程序商城电商个人会员中心页面制作设计 [图]
今天主要商品详情页中sku的弹出属性筛选选择框其中包含绘制一个阴影背景、弹出的动画、购买数量加减的逻辑以及图片如何高于弹出框。
先看看做好以后达到效果图片：
一、样式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;
}
|
以上样式代码有几个重要属性需要注意下：
1. 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倍距离移动到本身的位置
2. transition 过度转变transition : property duration timing-function delay;
property : 制定css属性的名字，all代表所有属性都获得过度效果
duration : 过度时间，必须有值，否则动画无效果
timing-function : 允许一个过渡效果，以改变其持续时间的速度 ease规定慢速开始，然后变快，然后慢速结束的过渡效果
delay :推迟动画的时间
transition: all 0.4s ease;意思是全部属性执行动画在0.4s之内，开始慢速然后变快，最后慢速结束
|
3. position 位置属性
absolute 生成绝对定位的元素，相对于父元素进行定位元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。
|
阴影部分要铺满屏幕所以用到了fixed属性，把上下左右的距离都设置为0，就可以使整个阴影铺满浏览器的窗口了；
二、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
});
}
|
以上js代码如下了解如下几点：
1、Object.assign，这个是js的属性，定义是：从一个对象复制所有的属性到另一个对象是一个常见的操作，这里就是把Temp.Quantity的数据和detail.js的数据合并到一起
2、require（）是引用别的地方的js代码，这里就是引用contract.js里的js代码
3、handleQuantityChange 加减按钮触发的事件监听，每点击加减按钮，都会回调此方法
三、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>
|
.jpg)
.jpg)
