首页技术正文

微信小程序——加入购物车弹层

程序员小菊技术 2022年11月16日

0 收藏 627 点赞 4,731 浏览 1524 个字

对于网上商城，加入购物车是一个必备功能了。俺今天就来说下在微信小程序里如何造一个购物车弹层。

先上图：

主要用到的微信API:wx.createAnimation(OBJECT)

说下思路：

1.wxml文件里将页面布局好，我的布局如下图：

大概的框架代码如下：

<view class='mask-layer' wx:if="{{showPop}}" bindtap='hideModal'></view>
<view class='pop-add-cart pop-common' wx:if="{{showPop}}" animation='{{animationData}}'>
  <view class='header row'>
    头部区域
  </view>
  <scroll-view class='body' scroll-y='true'>
    中间区域
  </scroll-view>
  <view class='footer toolbar'>
    底部区域
  </view>
</view>

2.wxss里面写样式，主要的样式代码如下：

.mask-layer {
  width: 100%;
  height: 100%;
  position: fixed;
  top:;
  left:;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index:;
  color: #fff;
}
.pop-common {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom:;
  left:;
  z-index:;
  background: #fff;
}

3.写动画所需的js：

//获取应用实例
var app = getApp();Page({  /**
   * 页面的初始数据
   */
  data: {
    showPop: false,
    animationData: {},
  },  // 显示底部弹层
  showModal: function() {
    var _this = this;
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease',
      delay: 0
    })
    _this.animation = animation
    animation.translateY(300).step()
    _this.setData({
      animationData: animation.export(),
      showPop: true
    })
    setTimeout(function() {
      animation.translateY(0).step()
      _this.setData({
        animationData: animation.export()
      })
    }.bind(_this), 50)
  },
  // 隐藏底部弹层
  hideModal: function() {
    var _this = this;
    // 隐藏遮罩层
    var animation = wx.createAnimation({
      duration: 500,
      timingFunction: "ease",
      delay: 0
    })
    _this.animation = animation
    animation.translateY(300).step()
    _this.setData({
      animationData: animation.export(),
    })
    setTimeout(function() {
      animation.translateY(0).step()
      _this.setData({
        animationData: animation.export(),
        showPop: false
      })
    }.bind(this), 200)
  },
})