1# FAQs<a name="EN-US_TOPIC_0000001055049072"></a> 2 3## Visual Application FAQs<a name="section147421736145813"></a> 4 5### Is there a global variable that can be accessed by all pages?<a name="section294382614018"></a> 6 7There is no such a global variable. 8 9### How do I obtain DOM elements?<a name="section1423713435019"></a> 10 11You can obtain DOM elements via the **ref** attribute. You can use methods of the obtained elements but cannot change their attributes. The sample code is as follows: 12 13``` 14<!--index.hml--> 15<div class="container"> 16 <!-- Set the ref attribute of the component to animator -->. 17 <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> 18</div> 19 20/* index.js */ 21export default { 22 data: { 23 images:[ 24 {src:"common/frame1.png"}, 25 {src:"common/frame2.png"}, 26 {src:"common/frame3.png"} 27 ] 28 }, 29 handleClick(){ 30 // Obtain the component through the $refs attribute. (The ref attribute of the component has been set to animator in the HML file.) 31 const animator = this.$refs.animator; 32 const state = animator.getState(); 33 if(state == "paused"){ 34 animator.resume(); 35 }else if(state == "stopped"){ 36 animator.start(); 37 }else{ 38 animator.pause(); 39 } 40 } 41} 42``` 43 44### How do I pass values between pages?<a name="section119822143117"></a> 45 46You can pass values through **params** of the **router.replace** method. The sample code is as follows: 47 48Set **params** to the values to be passed on a page. 49 50``` 51router.replace({ 52 uri:'pages/detail/detail', // URI of the page to switch to. 53 params:{transferData:this.data} // Data to be transferred. You need to define the data amount and name. 54}); 55``` 56 57Receive the passed values on another page. 58 59``` 60onInit(){ 61 const data = this.transferData; // Receive the transferred data by the onInit function. 62} 63``` 64 65### How do I scroll a list to an item?<a name="section188663819111"></a> 66 67Call the **scrollTo** method of the list. The input parameter of this method is the index of the target item. You can specify an item index, or obtain the index through the **scrollend** event. 68 69### Does the **<text\>** component support multiple lines?<a name="section205741157418"></a> 70 71Yes. You can use the Enter key to start a new line. Alternatively, the component automatically starts a new line based on the content, without the need to set the height attribute of the text. 72 73### Why is a component not displayed?<a name="section1345810151025"></a> 74 75**Description** 76 77The component added to the **.hml** file cannot be displayed. 78 79**Possible Causes** 80 81- The width and height of the component may not be set. 82- The style setting may be incorrect. 83 84**Solution** 85 86\(1\) Check whether the width and height values are set explicitly. 87 88\(2\) Check whether the style of the component is set correctly. 89 90### How do I implement scrolling on a page?<a name="section1724052813218"></a> 91 92There are three ways to implement page scrolling: **scroll**, **<list\>**, or **<swiper\>**. For a root component with **scroll** set, the scrolling effect is automatically implemented when the component size exceeds the screen size. For details, see the development specifications. 93 94### Why do not the **left** and **top** attributes take effect?<a name="section34659571520"></a> 95 96**left** and **top** attributes must work with the **<stack\>** component in addition to the root component. 97 98### Why does not dynamic binding take effect?<a name="section1758881511313"></a> 99 100The object or its attributes are not defined before dynamic binding. 101 102### How do I implement relative and absolute positioning?<a name="section1378730235"></a> 103 104You can use the **<div\>** and **<stack\>** \(with **top** and **left** attributes\) components. 105 106### How do I display or hide a component?<a name="section1243424718312"></a> 107 108You can use **display**, **show**, or **if**. When an **if** clause evaluates to **false**, the corresponding component will be removed from the VDOM. When **show** is set to **false**, the component will be invisible during rendering, but will not be removed from the VDOM. 109 110### What are the precautions for using the **margin** attribute?<a name="section7923357414"></a> 111 112The **margin** attribute cannot be set for child components of the **<stack\>** component. 113 114### What are the precautions for event subscription?<a name="section91641925548"></a> 115 116Only one page exists when the application is running. Therefore, the **router.replace** function destroys the previous page and then creates a new one. For pages involving event subscription, an event should be subscribed every time a page is created, and unsubscribed before page switching. 117 118### What are the precautions for using dynamic binding?<a name="section1292412431744"></a> 119 120Do not use too many dynamic bindings because they consume too much memory. 121 122### How does the **loop** attribute take effect for **<swiper\>**?<a name="section1136434952"></a> 123 124If the total length of the child components, except for the first and last ones, is greater than the length of **<swiper\>**, the **loop** attribute takes effect. 125 126### What are the precautions for using an array?<a name="section1979819133510"></a> 127 128Do not include too many elements in an array. Avoid frequent operations on a large array. 129 130
