• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果图:

<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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序---根据数据库反向生成java文件发布时间:2022-07-18
下一篇:
微信小程序-数据绑定发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap