From aa4c6b69fb2b39ad29c279fdf94f267c3a6e83b7 Mon Sep 17 00:00:00 2001 From: qiang Date: Wed, 21 Jul 2021 21:00:39 +0800 Subject: [PATCH] feat(App): swiper use rebuild --- .../uni-app-plus/dist/uni-app-view.umd.js | 21 +++++++++++++++++-- .../src/components/swiper/index.tsx | 16 +++++++++++--- .../uni-components/src/helpers/useRebuild.ts | 6 ++++++ packages/uni-h5/dist/uni-h5.cjs.js | 7 +++++-- packages/uni-h5/dist/uni-h5.es.js | 7 +++++-- 5 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 packages/uni-components/src/helpers/useRebuild.ts diff --git a/packages/uni-app-plus/dist/uni-app-view.umd.js b/packages/uni-app-plus/dist/uni-app-view.umd.js index daf313bea..0bb1bec09 100644 --- a/packages/uni-app-plus/dist/uni-app-view.umd.js +++ b/packages/uni-app-plus/dist/uni-app-view.umd.js @@ -13170,6 +13170,10 @@ var __publicField = (obj, key, value) => { return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m); } }; + function useRebuild(callback) { + const instance = getCurrentInstance(); + instance.rebuild = callback; + } const props$5 = { indicatorDots: { type: [Boolean, String], @@ -13692,14 +13696,23 @@ var __publicField = (obj, key, value) => { function updateSwiperContexts() { const contexts = []; for (let index2 = 0; index2 < swiperItems.length; index2++) { - const swiperItem2 = swiperItems[index2]; - const swiperContext = originSwiperContexts.find((context) => swiperItem2.el === context.rootRef.value); + let swiperItem2 = swiperItems[index2]; + if (!(swiperItem2 instanceof Element)) { + swiperItem2 = swiperItem2.el; + } + const swiperContext = originSwiperContexts.find((context) => swiperItem2 === context.rootRef.value); if (swiperContext) { contexts.push(markRaw(swiperContext)); } } swiperContexts.value = contexts; } + { + useRebuild(() => { + swiperItems = slideFrameRef.value.children; + updateSwiperContexts(); + }); + } const addSwiperContext = function(swiperContext) { originSwiperContexts.push(swiperContext); updateSwiperContexts(); @@ -14391,6 +14404,10 @@ var __publicField = (obj, key, value) => { { console.log(formatLog("Observer", mutations)); } + const vm = this.$.__vueParentComponent; + if (vm.rebuild) { + vm.rebuild(); + } }); observer.observe(elem, { childList: true, diff --git a/packages/uni-components/src/components/swiper/index.tsx b/packages/uni-components/src/components/swiper/index.tsx index 52de7f606..ceb303848 100644 --- a/packages/uni-components/src/components/swiper/index.tsx +++ b/packages/uni-components/src/components/swiper/index.tsx @@ -16,6 +16,7 @@ import { defineBuiltInComponent } from '../../helpers/component' import { useCustomEvent, CustomEventTrigger } from '../../helpers/useEvent' import { useTouchtrack } from '../../helpers/useTouchtrack' import { flatVNode } from '../../helpers/flatVNode' +import { useRebuild } from '../../helpers/useRebuild' import { rpx2px } from '@dcloudio/uni-core' const props = { @@ -643,15 +644,18 @@ export default /*#__PURE__*/ defineBuiltInComponent({ height: !props.vertical ? '100%' : value, } }) - let swiperItems: VNode[] = [] + let swiperItems: VNode[] | HTMLCollection = [] const originSwiperContexts: SwiperContext[] = [] const swiperContexts: Ref = ref([]) function updateSwiperContexts() { const contexts: SwiperContext[] = [] for (let index = 0; index < swiperItems.length; index++) { - const swiperItem = swiperItems[index] + let swiperItem: VNode | Element = swiperItems[index] + if (!(swiperItem instanceof Element)) { + swiperItem = swiperItem.el as HTMLElement + } const swiperContext = originSwiperContexts.find( - (context) => swiperItem.el === context.rootRef.value + (context) => swiperItem === context.rootRef.value ) if (swiperContext) { contexts.push(markRaw(swiperContext)) @@ -659,6 +663,12 @@ export default /*#__PURE__*/ defineBuiltInComponent({ } swiperContexts.value = contexts } + if (__PLATFORM__ === 'app') { + useRebuild(() => { + swiperItems = (slideFrameRef.value as HTMLElement).children + updateSwiperContexts() + }) + } const addSwiperContext: AddSwiperContext = function (swiperContext) { originSwiperContexts.push(swiperContext) updateSwiperContexts() diff --git a/packages/uni-components/src/helpers/useRebuild.ts b/packages/uni-components/src/helpers/useRebuild.ts new file mode 100644 index 000000000..aaff40d8c --- /dev/null +++ b/packages/uni-components/src/helpers/useRebuild.ts @@ -0,0 +1,6 @@ +import { getCurrentInstance } from 'vue' + +export function useRebuild(callback: () => void) { + const instance = getCurrentInstance() as any + instance.rebuild = callback +} diff --git a/packages/uni-h5/dist/uni-h5.cjs.js b/packages/uni-h5/dist/uni-h5.cjs.js index 09232222c..712dafdf5 100644 --- a/packages/uni-h5/dist/uni-h5.cjs.js +++ b/packages/uni-h5/dist/uni-h5.cjs.js @@ -6120,8 +6120,11 @@ var index$g = /* @__PURE__ */ defineBuiltInComponent({ function updateSwiperContexts() { const contexts = []; for (let index2 = 0; index2 < swiperItems.length; index2++) { - const swiperItem = swiperItems[index2]; - const swiperContext = originSwiperContexts.find((context) => swiperItem.el === context.rootRef.value); + let swiperItem = swiperItems[index2]; + if (!(swiperItem instanceof Element)) { + swiperItem = swiperItem.el; + } + const swiperContext = originSwiperContexts.find((context) => swiperItem === context.rootRef.value); if (swiperContext) { contexts.push(vue.markRaw(swiperContext)); } diff --git a/packages/uni-h5/dist/uni-h5.es.js b/packages/uni-h5/dist/uni-h5.es.js index a89cc5459..ae59c6985 100644 --- a/packages/uni-h5/dist/uni-h5.es.js +++ b/packages/uni-h5/dist/uni-h5.es.js @@ -12544,8 +12544,11 @@ var Swiper = /* @__PURE__ */ defineBuiltInComponent({ function updateSwiperContexts() { const contexts = []; for (let index2 = 0; index2 < swiperItems.length; index2++) { - const swiperItem = swiperItems[index2]; - const swiperContext = originSwiperContexts.find((context) => swiperItem.el === context.rootRef.value); + let swiperItem = swiperItems[index2]; + if (!(swiperItem instanceof Element)) { + swiperItem = swiperItem.el; + } + const swiperContext = originSwiperContexts.find((context) => swiperItem === context.rootRef.value); if (swiperContext) { contexts.push(markRaw(swiperContext)); } -- GitLab