मेरे पास एक वू एप्लिकेशन है और मैं एसिंक घटकों को लोड करता हूं।

समस्या यह है कि पेज रेंडर कूद रहा है।

उदाहरण के लिए, तस्वीर में मैं हेडर, इंट्रो, स्लाइड कंपोनेंट्स (और स्लाइड कंपोनेंट के बाद और कंपोनेंट्स) लोड करता हूं।

जब मैं import('./...') का उपयोग करता हूं तो मैं देखता हूं कि स्लाइड घटक पहले प्रस्तुत करना है फिर हेडर फिर परिचय घटक। (यह क्रम हमेशा बदलता रहता है)।

यह पृष्ठ के कूदने का कारण है, स्लाइड नीचे जा रही है और परिचय दिखाई दे रहा है, जिसमें खराब ux है।

मैं इसे सीएसएस ग्रिड द्वारा ठीक करने का प्रयास करता हूं - टेम्पलेट-कॉलम-पंक्तियों (न्यूनतम आकार) को परिभाषित करता हूं, लेकिन घटक अभी तक नहीं हैं। इसलिए रैप डिव बाल घटकों पर प्रभाव नहीं डालता है।

enter image description here

यहाँ इस चित्र के द्वारा हेडर और स्लाइड पहले से ही रेंडर किए गए हैं, और कुछ सेकंड के बाद इंट्रो दिखाई देता है।

enter image description here

कोई विचार है कि इस समस्या को कैसे संभालना है?

1
Jon Sud 27 पद 2019, 18:30

1 उत्तर

यदि आप पहले से जानते हैं कि घटकों को लोड किया जा रहा है, तो आप इन घटकों को लोड करने वाले मूल घटक में रैपर divs बना सकते हैं। और इन रैपर में एक css grid सिस्टम जोड़ें divs, height आदि को परिभाषित करते हुए।

यह पृष्ठ के चारों ओर तत्वों को कूदने से रोकेगा क्योंकि नए घटक लोड किए जाते हैं।

चूंकि आपने कोई कोड साझा नहीं किया है, इसलिए इस उत्तर को अपनी विशिष्ट आवश्यकताओं के अनुरूप बनाना कठिन है। मुझे आशा है कि यह आपको एक विचार देता है कि क्या करना है।

उदाहरण

अभिभावक

<template>
   <div class="container">
      <div id="header__wrapper">
        <Header />
      </div>
      <div id="intro__wrapper">
         <Intro />
      </div>
     <div id="slide_wrapper">
         <Slide />
     </div>
</template>

सीएसएस

.container {
    grid-template-rows: 1fr 1fr 1fr; /* or whatever you need */
}
1
tony19 28 पद 2019, 08:49