微信小程序开发之购物车底部滑入动画

使用css3的transition属性来实现购物车列表从底部滑入的动画效果

一、效果图

二、wxml
新建2个组件，一个是购物车goods.wxml。另一个是购物车列表弹出层cart.wxml，我们要实现的效果是点击goods.wxml组件里的“购物车”按钮，然后从底部滑入一个购物车列表弹出层（cart.wxml）。
在这里，我们使用include方法引入cart组件，用temp引入组件的方式也行。两者区别请自行百度，这里不做描述了。

<!-- 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>

三、wxss
这里注意，goods.wxss需要用@import的方法引入cart.wxss，否则无法渲染对应的样式效果。

/* 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);
}

四、js
首先，需要在“购物车”按钮绑定一个tap事件bindtap='btnCart'，点击时显示半透明黑色遮罩层，这里通过true和false来实现。

<!-- goods.wxml -->
<button type='button' bindtap='btnCart'>购物车</button>

在data里定义变量mask，用来表示遮罩层，默认隐藏即false。

data: {
    mask: false
}

点击显示遮罩层，即把mask的值设置成true。然后用wx:if渲染。

btnCart: function () {
    this.setData({
      mask: true
    })
}

<!-- cart.wxml -->
<view class='mask' wx:if="{{mask}}" bindtap='close'></view>

然后点击遮罩层实现隐藏自身效果，在view标签上增加tap事件bindtap='close'，把mask值设置成false即可。

close: function () {
    this.setData({
      mask: false
    })
}

接下来实现底部购物车列表滑入效果，注意这里不能用wx:if这个属性（display: none），否则transition属性过渡效果会无效。
我们可以通过增加class和移除class这个小技巧来实现效果，如点击“购物车”按钮时给底部购物车列表弹出层增加一个class="an"，点击遮罩层移除这个class。这里需要在data定义一个变量status，用来表示这个class="an"的开关状态，默认为false。

data: {
    mask: false,
    status: false
}

点击“购物车”按钮时，把status设置为true。

btnCart: function () {
    this.setData({
      mask: true,
      status: true
    })
}

再通过三元运算符来实现class的切换（status为true时class为="an" 否则class=""）。

<!-- cart.wxml -->
<view class='cart-list {{status == true ? "an" : ""}}'></view>

同理点击遮罩层时，把class="an"移除，即把status设置为false。

close: function () {
    this.setData({
      mask: false,
      status: false
    })
}

以下代码是实现弹入效果的样式。

.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);
}

微信小程序开发之购物车底部滑入动画

推荐阅读更多精彩内容