<!-- goods.wxml -->
<view class='cart'>
  <button type='button' bindtap='btnCart'>購(gòu)物車</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
    })
}