xu-popup
Version:
小程序弹窗组件，支持动画效果，点击背景关闭
97 lines (94 loc) • 2.47 kB
JavaScript
Component({
properties: {
position: {
type: String,
value: 'fade',
},
show: {
type: Boolean,
value: false
},
bg: {
type: Boolean,
value: true,
},
bgclick: {
type: Boolean,
value: true,
}
},
observers: {
'show': function(val) {
let animation = wx.createAnimation({
duration: 200,
timingFunction: 'linear'
})
if(val){
animation.opacity(1).left(0).top(0).step();
this.setData({
animationData: animation.export()
})
}else{
switch (this.properties.position) {
case 'fade':
animation.opacity(0).step();
break;
case 'left':
animation.left('-100%').step();
break;
case 'top':
animation.top('-100%').step();
break;
case 'right':
animation.left('100%').step();
break;
default:
animation.top('100%').step();
break;
}
this.setData({
animationData:animation.export()
})
}
}
},
pageLifetimes: {
show() {
},
hide() {
// 页面被隐藏
},
resize(size) {
// 页面尺寸变化
}
},
data: {
animationData: {}
},
methods: {
// 点击背景
closetag() {
if (this.properties.bgclick) {
this.setData({
show: false
})
this.triggerEvent('close', {
bb: 1
});
}
},
// 防止滑动穿透
preventTouchMove() {
console.log("stop");
return
},
closePop() {
this.setData({
show: false
})
},
endFun(){
console.log('end')
}
}
})