** repeatedly to render a complex page, frame freezing may occur. In this case, use the **
** component instead of **** to lay out list items, which provides a smooth list scrolling. Note that **
** supports only **** as it child components. The following is an example:
```
{{$item.value}}
```
```
/* xxx.css */
.desc-text {
width: 683.3px;
font-size: 35.4px;
}
```
```
// xxx.js
export default {
data: {
textList: [{value: 'JS FA'}],
},
}
```
To shorten the sample code, the list contains only one **** component that holds only one **** component. In practice, a **** has multiple **** components, and a **** has multiple child components.
##
If your page needs to be dynamically loaded, use the **** component. This component supports the change event, which is triggered after tab switching. A **** component can hold only one **** and one ****. The following is an example:
```
Home
Index
Detail
```
```
// xxx.js
export default {
data: {
homeImage: '/common/home.png',
indexImage: '/common/index.png',
detailImage: '/common/detail.png',
},
}
```
The **** component is used to display the tab content, which vertically fills the remaining space of the **** component by default.