【HTML5从入门到精通】之小程序底部划入滑出效果_编码库
首页 > 网页设计 > html5设计

【HTML5从入门到精通】之小程序底部划入滑出效果

文章作者码农 发布时间2020-07-06 18:10:00 阅读次数 0 本文共计:3245 字 文章评论 0 汇编语言程序设计 程序设计实践 JAVA基础 JAVA学习 JAVA语言 程序设计 程序员 windows程序设计 算法与程序设计 结构化程序设计
直接复制就能用 wxml <view bindtap="showModal">点这里</view> <view class="wrap&qu

直接复制就能用

wxml

<view bindtap="showModal">点这里</view>

<view class="wrap">
    <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
        <view class="modal-cancel" bindtap="hideModal"></view>
        <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
                  <!-- 滑块儿区 -->
            <view class='huakuai'></view>
        </view>
    </view>
</view>

wxss

/*模态框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top:0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/*动画前初始位置*/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
/* 底部弹出框 */
.bottom-positon{
  text-align: center;
}
.huakuai{
     margin-bottom: 20rpx;
     height:574rpx;
     width:100%;
     padding-top:50rpx;
     background:#fff;
}

wx.js

data: {
            hideFlag: true,//true-隐藏  false-显示
            // animationData: {},
      },


       // 显示遮罩层  底部滑动
 showModal: function () {
      var that = this;
      that.setData({
        hideFlag: false
      })
      // 创建动画实例
      var animation = wx.createAnimation({
        duration: 400,//动画的持续时间
        timingFunction: 'ease',//动画的效果 默认值是linear->匀速,ease->动画以低速开始,然后加快,在结束前变慢
      })
      this.animation = animation; //将animation变量赋值给当前动画
      var time1 = setTimeout(function () {
        that.slideIn();//调用动画--滑入
        clearTimeout(time1);
        time1 = null;
      }, 100)
    },
   
    // 隐藏遮罩层
    hideModal: function () {
      var that = this;
      var animation = wx.createAnimation({
        duration: 400,//动画的持续时间 默认400ms
        timingFunction: 'ease',//动画的效果 默认值是linear
      })
      this.animation = animation
      that.slideDown();//调用动画--滑出
      var time1 = setTimeout(function () {
        that.setData({
          hideFlag: true
        })
        clearTimeout(time1);
        time1 = null;
      }, 220)//先执行下滑动画,再隐藏模块
      
    },
    //动画 -- 滑入
    slideIn: function () {
      this.animation.translateY(0).step() // 在y轴偏移,然后用step()完成一个动画
      this.setData({
        //动画实例的export方法导出动画数据传递给组件的animation属性
        animationData: this.animation.export()
      })
    },
    //动画 -- 滑出
    slideDown: function () {
      this.animation.translateY(300).step()
      this.setData({
        animationData: this.animation.export(),
      })
    }

 

关键词: html5,html5从入门到精通,html5代码
后台-系统设置-扩展变量-手机广告位-内容正文底部
关于源码库

本站文章仅代表作者观点,不代表本站立场,所有资源非营利性免费分享。
编码库致力于各类程序源代码、程序设计与应用、网络程序源代码的资源共享,希望广大程序员努力学习,让我们用科技改变世界。
【HTML5从入门到精通】之小程序底部划入滑出效果:http://www.0314.online/webwangyezhizuo/html5/38129.html

后台-系统设置-扩展变量-手机广告位-评论底部广告位

合作伙伴

编码库

http://www.0314.online/

统计代码 | 冀ICP备19024639号-1

Powered By 编码库 信息来自互联网