• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 常见问题<a name="ZH-CN_TOPIC_0000001055049072"></a>
2
3-   [视觉应用常见问题](#section147421736145813)
4    -   [是否存在一个全局变量，所有的页面都可以访问？](#section294382614018)
5    -   [如何获取dom中的元素？](#section1423713435019)
6    -   [如何在页面间传值？](#section119822143117)
7    -   [list如何滚动到某个item？](#section188663819111)
8    -   [text支持多行吗？](#section205741157418)
9    -   [为什么控件不显示？](#section1345810151025)
10    -   [如何实现页面滑动？](#section1724052813218)
11    -   [Left、Top为什么不生效？](#section34659571520)
12    -   [动态绑定为什么不生效？](#section1758881511313)
13    -   [如何实现相对定位和绝对定位？](#section1378730235)
14    -   [如何控制控件的显示与隐藏？](#section1243424718312)
15    -   [使用Margin时，有什么注意事项？](#section7923357414)
16    -   [使用事件订阅时，有什么注意事项？](#section91641925548)
17    -   [使用动态绑定时，有什么注意事项？](#section1292412431744)
18    -   [swiper loop属性如何生效？](#section1136434952)
19    -   [使用数组时，有什么注意事项？](#section1979819133510)
20
21
22## 视觉应用常见问题<a name="section147421736145813"></a>
23
24### 是否存在一个全局变量，所有的页面都可以访问？<a name="section294382614018"></a>
25
26当前框架中不存在所有Page都可以访问的全局变量。
27
28### 如何获取dom中的元素？<a name="section1423713435019"></a>
29
30通过ref属性获取dom中的元素，详细示例如下图所示；获取的元素只能使用它的方法，不能改变属性。
31
32```
33<!--index.hml-->
34<div class="container">
35   <!--指定组件的ref属性为animator-->
36   <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator>
37</div>
38
39/* index.js */
40export default {
41    data: {
42        images:[
43            {src:"common/frame1.png"},
44            {src:"common/frame2.png"},
45            {src:"common/frame3.png"}
46        ]
47    },
48    handleClick(){
49        //通过$refs属性获取对应的组件，在hml中，组件的ref属性要设置为animator
50        const animator = this.$refs.animator;
51        const state = animator.getState();
52        if(state == "paused"){
53            animator.resume();
54        }else if(state == "stopped"){
55            animator.start();
56        }else{
57            animator.pause();
58        }
59    }
60}
61```
62
63### 如何在页面间传值？<a name="section119822143117"></a>
64
65通过router.replace方法中的params参数来传递，参考代码如下：
66
67第一个页面传递数据：
68
69```
70router.replace({
71    uri:'pages/detail/detail',  //要跳转的页面uri
72    params:{transferData:this.data}  //传递的数据，数据个数和名称开发者自己定义，
73});
74```
75
76第二个界面接受数据：
77
78```
79onInit(){
80    const data = this.transferData;  //在onInit函数中接受传递的数据
81}
82```
83
84### list如何滚动到某个item？<a name="section188663819111"></a>
85
86通过list的scrollTo方法滚动到指定的item，参数是目标item的index。Index参数可以通过scrollend事件获取或者开发者指定。
87
88### text支持多行吗？<a name="section205741157418"></a>
89
90text支持多行。通过回车键换行或者是不设置text的高度属性，由控件自动根据内容换行。
91
92### 为什么控件不显示？<a name="section1345810151025"></a>
93
94**现象描述**
95
96开发者在hml文件中添加的控件无法显示
97
98**可能原因**
99
100-   未设置width和height值；
101-   样式设置错误。
102
103**处理步骤**
104
105\(1\)检查是否设置width和height值，组件必须显式设置width和height值；
106
107\(2\)检查组件的样式设置是否正确。
108
109### 如何实现页面滑动？<a name="section1724052813218"></a>
110
111实现页面滑动目前有三种方式：scroll（根组件大小超过屏幕的大小即自动实现scroll效果）、list、swiper。开发者可以参考开发文档查看三者的区别，并加以使用。
112
113### Left、Top为什么不生效？<a name="section34659571520"></a>
114
115除根节点外，Left、Top配合Stack组件使用才有效果。
116
117### 动态绑定为什么不生效？<a name="section1758881511313"></a>
118
119在进行绑定时，必须先将要绑定的对象或者对象的属性进行定义，不能先绑定后定义
120
121### 如何实现相对定位和绝对定位？<a name="section1378730235"></a>
122
123使用div、stack（top left属性）来实现相对和绝对定位。
124
125### 如何控制控件的显示与隐藏？<a name="section1243424718312"></a>
126
127通过display、show和if来控制控件的显示与隐藏。区别在于：if为false时，组件会从VDOM中移除，而show仅是渲染时不可见，组件依然存在于VDOM中。
128
129### 使用Margin时，有什么注意事项？<a name="section7923357414"></a>
130
131Stack组件不支持其子组件设置margin属性。
132
133### 使用事件订阅时，有什么注意事项？<a name="section91641925548"></a>
134
135在应用运行期间只存在一个page，所以router.replace跳转是先销毁前一个页面，然后在新创建一个界面。因此，如果涉及到事件订阅的页面，每次页面创建时要进行事件订阅，跳转离开界面前取消事件订阅。
136
137### 使用动态绑定时，有什么注意事项？<a name="section1292412431744"></a>
138
139过多的动态绑定会消耗较多的内存，若非业务需要，尽量不要使用太多的动态绑定。
140
141### swiper loop属性如何生效？<a name="section1136434952"></a>
142
143去掉第一个组件或者去掉最后一个组件，剩余的长度大于swiper长度，loop生效。
144
145### 使用数组时，有什么注意事项？<a name="section1979819133510"></a>
146
147数组元素不宜过多，尽量避免对大数组进行频繁操作。
148
149