From 0a24ffeb3eff074c8f11e9f94fdf2c2cb4929799 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 10 Nov 2023 13:08:29 +0800 Subject: [PATCH] fix:小程序详情修改 --- uni_modules/uview-ui/components/u-transition/transition.js | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 157 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-transition/transition.js b/uni_modules/uview-ui/components/u-transition/transition.js new file mode 100644 index 0000000..92e5681 --- /dev/null +++ b/uni_modules/uview-ui/components/u-transition/transition.js @@ -0,0 +1,157 @@ +// ������������������������������������������promise������������nextTick���������������������������then������ +const nextTick = () => new Promise(resolve => setTimeout(resolve, 1000 / 50)) +// nvue��������������������������������������������� +import animationMap from './nvue.ani-map.js' + +// #ifndef APP-NVUE +// ������������������������������������������������������������������������css������������ +const getClassNames = (name) => ({ + enter: `u-${name}-enter u-${name}-enter-active`, + 'enter-to': `u-${name}-enter-to u-${name}-enter-active`, + leave: `u-${name}-leave u-${name}-leave-active`, + 'leave-to': `u-${name}-leave-to u-${name}-leave-active` +}) +// #endif + +// #ifdef APP-NVUE +// ������nvue(weex)���animation��������������������������� +// https://weex.apache.org/zh/docs/modules/animation.html#transition +const animation = uni.requireNativePlugin('animation') +const getStyle = (name) => animationMap[name] +// #endif + +export default { + methods: { + // ��������������������������� + clickHandler() { + this.$emit('click') + }, + // #ifndef APP-NVUE + // vue��������������������������� + vueEnter() { + // ������������������������ + const classNames = getClassNames(this.mode) + // ������������������������������������������ + this.status = 'enter' + this.$emit('beforeEnter') + this.inited = true + this.display = true + this.classes = classNames.enter + this.$nextTick(async () => { + // #ifdef H5 + await uni.$u.sleep(20) + // #endif + // ������������������������ + this.$emit('enter') + this.transitionEnded = false + // ������������������������������������ + this.$emit('afterEnter') + // ������������enter-to������ + this.classes = classNames['enter-to'] + }) + }, + // ������������������ + vueLeave() { + // ��������������������������������������������� + if (!this.display) return + const classNames = getClassNames(this.mode) + // ��������������������������������� + this.status = 'leave' + this.$emit('beforeLeave') + // ������������ + this.classes = classNames.leave + + this.$nextTick(() => { + // ��������������������������� + this.transitionEnded = false + this.$emit('leave') + // ������������������������������������������������������������������������������ + setTimeout(this.onTransitionEnd, this.duration) + this.classes = classNames['leave-to'] + }) + }, + // #endif + // #ifdef APP-NVUE + // nvue������������������ + nvueEnter() { + // ��������������������� + const currentStyle = getStyle(this.mode) + // ��������������������������������� + this.status = 'enter' + this.$emit('beforeEnter') + // ������������������������ + this.inited = true + this.display = true + // ���nvue��������������������������������������������������������������������������������������������������������������� + // ��������������������������������������������������������������������������������������������������������������������������������������������������������� + this.viewStyle = { + opacity: 0 + } + // ������������������������������ + this.$nextTick(() => { + // ������������ + this.viewStyle = currentStyle.enter + Promise.resolve() + .then(nextTick) + .then(() => { + // ������������������������������ + this.$emit('enter') + // nvue���transition������������������������ref������������������������������ref���������vue���this.$refs['u-transition']������ + animation.transition(this.$refs['u-transition'].ref, { + styles: currentStyle['enter-to'], + duration: this.duration, + timingFunction: this.timingFunction, + needLayout: false, + delay: 0 + }, () => { + // ��������������������������������� + this.$emit('afterEnter') + }) + }) + .catch(() => {}) + }) + }, + nvueLeave() { + if (!this.display) { + return + } + const currentStyle = getStyle(this.mode) + // ��������������������� + this.status = 'leave' + this.$emit('beforeLeave') + // ������������ + this.viewStyle = currentStyle.leave + // ������promise��������������������� + Promise.resolve() + .then(nextTick) // ������������ms + .then(() => { + this.transitionEnded = false + // ��������������������������� + this.$emit('leave') + animation.transition(this.$refs['u-transition'].ref, { + styles: currentStyle['leave-to'], + duration: this.duration, + timingFunction: this.timingFunction, + needLayout: false, + delay: 0 + }, () => { + this.onTransitionEnd() + }) + }) + .catch(() => {}) + }, + // #endif + // ��������������������� + onTransitionEnd() { + // ������������������������������������������������ + if (this.transitionEnded) return + this.transitionEnded = true + // ������������������������������������ + this.$emit(this.status === 'leave' ? 'afterLeave' : 'afterEnter') + if (!this.show && this.display) { + this.display = false + this.inited = false + } + } + } +} -- Gitblit v1.8.0