const { showToast } = require('../utils/util');
Component({
data: {
selected: 0,
visible: true, // tab-bar 显示状态
animating: false, // 是否正在动画中
animationData: {}, // 动画数据
},
lifetimes: {
attached() {
// 创建动画实例
this.animation = wx.createAnimation({
duration: 300,
timingFunction: 'ease',
delay: 0,
});
// 初始化时，如果可见，直接设置位置
if (this.data.visible) {
this.animation.translateY(0).step({ duration: 0 });
this.setData({ animationData: this.animation.export() });
} else {
this.animation.translateY('100%').step({ duration: 0 });
this.setData({ animationData: this.animation.export() });
}
},
detached() {
// 清理动画相关的定时器
if (this._animationTimer) {
clearTimeout(this._animationTimer);
this._animationTimer = null;
}
},
},
methods: {
handleTansitionEnd() {
this.setData({ animating: false });
this._animationTimer = null;
if (typeof this.callback === 'function') {
callback();
this.callback = null;
}
},
// 执行动画并管理状态
_executeAnimation(translateYValue, targetVisible, callback) {
// 清理之前的定时器
if (this._animationTimer) {
clearTimeout(this._animationTimer);
this._animationTimer = null;
}
this.setData({ animating: true });
// 执行动画
this.animation.translateY(translateYValue).step();
this.callback = callback;
this.setData({
animationData: animation.export(),
visible: targetVisible,
});
},
// 显示 tab-bar
show() {
// 如果已经可见或正在动画中，直接返回
if (this.data.visible || this.data.animating) {
return;
}
this._executeAnimation(0, true);
},
// 隐藏 tab-bar
hide() {
// 如果已经隐藏或正在动画中，直接返回
if (!this.data.visible || this.data.animating) {
return;
}
this._executeAnimation('100%', false);
},
// 获取当前显示状态
isVisible() {
return this.data.visible;
},
});
这段代码是在一个自定义底部tabar中的动画处理逻辑，外部调用show方法和hide方法来切换显示和隐藏，在小程序环境下，开发这工具和真机效果都是正常的，但是在企业微信小程序环境下，真机动画效果刚好相反，正常情况下100%时应该向下移动（这里需要移动到屏幕底部隐藏），但实际的效果却是向上移动，这是为什么，这个问题要如何解决
