<!-- goods.wxml -->
<view class='cart'>
<button type='button' bindtap='btnCart'>购物车</button>
</view>
<include src="/pages/cart/cart.wxml"/>
<!-- cart.wxml -->
<view class='cart-list {{status == true ? "an" : ""}}'></view>
<view class='mask' wx:if="{{mask}}" bindtap='close'></view>
/* pages/goods/goods.wxss */
page{
background: #f8f8f8;
}
.cart{
position: fixed;
bottom: 0;
width: 100%;
}
button{
border-radius: 0;
background: #fd5f00;
color: #fff;
}
@import "/pages/cart/cart.wxss";
/* pages/cart/cart.wxss */
.mask{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
z-index: -1;
transition: all .2s cubic-bezier(.25,.5,.5,.9);
-webkit-transition: all .2s cubic-bezier(.25,.5,.5,.9);
}
.cart-list{
width: 100%;
height: 400rpx;
background: #fff;
position: fixed;
bottom: 0;
transform: translateY(400rpx);
-webkit-transform: translateY(400rpx);
transition: all .2s cubic-bezier(.25,.5,.5,.9);
-webkit-transition: all .2s cubic-bezier(.25,.5,.5,.9);
}
.an{
transform: translateY(0);
-webkit-transform: translateY(0);
}
data: {
mask: false,
status: false
}
btnCart: function () {
this.setData({
mask: true,
status: true
})
}
