直接复制就能用

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(),
})
}

 

1.《小程序底部划入滑出效果》援引自互联网，旨在传递更多网络信息知识，仅代表作者本人观点，与本网站无关，侵删请联系页脚下方联系方式。

2.《小程序底部划入滑出效果》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

3.文章转载时请保留本站内容来源地址，https://www.cxvn.com/study/26858.html