小程序动画滑动效果----点击底部出现购物车

- 日理万妓 2022-03-28 04:30 249阅读 0赞

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

<view>
      <view class='openCar' bindtap='openCar'>点击打开购物车</view>
      
      <view class='centData' wx:if="{
       {boolHidden}}" animation='{
       {animationData}}'>
        <view>
          <view class='cent'>
            这里面是内容
          </view>
          <view class='close' wx:if="{
       {boolHidden}}" bindtap='closeHide'>
            x
          </view>
        </view>
      </view>
    </view>

view{font-size: 28rpx;}
    .openCar{width: 100%;line-height: 100rpx;text-align: center;background-color: orangered;color: #ffffff;}
    .centData{width: 100%;height: 300px;background-color: orange;overflow: auto;position: fixed;left: 0;bottom: 0;z-index: 99;}
    .centData>view{width: 100%;height: 100%;position: relative;}
    .cent{line-height: 300px;text-align: center;color: #ffffff;}
    .close{width: 60rpx;height: 60rpx;line-height: 60rpx;border-radius: 60rpx;background-color: #ededed;color: #000000;text-align: center;position: absolute;right: 10rpx;top: 10rpx;z-index: 99;}

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        boolHidden: false,
        animationData: {}
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      },
      // 打开购物车
      openCar: function (e) {
        // 用that取代this，防止不必要的情况发生
        var that = this;
        // 创建一个动画实例
        var animation = wx.createAnimation({
          // 动画持续时间
          duration: 300,
          // 定义动画效果，当前是匀速
          timingFunction: 'linear'
        })
        // 将该变量赋值给当前动画
        that.animation = animation
        // 先在y轴偏移，然后用step()完成一个动画
        animation.translateY(300).step()
        // 用setData改变当前动画
        that.setData({
          // 通过export()方法导出数据
          animationData: animation.export(),
          // 改变view里面的Wx：if
          boolHidden: true
        })
        // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动
        setTimeout(function () {
          animation.translateY(0).step()
          that.setData({
            animationData: animation.export()
          })
        }, 200)
      },
      // 关闭购物车
      closeHide: function (e) {
        var that = this;
        var animation = wx.createAnimation({
          duration: 300,
          timingFunction: 'linear'
        })
        that.animation = animation
        animation.translateY(300).step()
        that.setData({
          animationData: animation.export()
        });
      }
    })

参考大佬博客：[https://www.cnblogs.com/chinabin1993/p/7605764.html][https_www.cnblogs.com_chinabin1993_p_7605764.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220328/bd58d5a841844db48a43634676761f42.png
[https_www.cnblogs.com_chinabin1993_p_7605764.html]: https://www.cnblogs.com/chinabin1993/p/7605764.html