uniapp如何封装一个公共的列表页面
时间: 2023-02-05 07:38:19 浏览: 59
在 uni-app 中,可以使用组件的方式来封装一个列表页面。
具体步骤如下:
1. 创建一个新的组件文件,在组件中定义一个接收 props 的模板。props 中可以包含列表数据和其他相关的配置项。
2. 在组件中使用 v-for 指令来渲染列表数据。在模板中,可以使用 props 中的配置项来决定列表的布局、样式等等。
3. 在组件的 script 部分中,定义好组件的 props 和其他相关的逻辑。
4. 在需要使用列表的页面中引入该组件,并传入所需的 props 即可。
示例代码如下:
```
<template>
<view>
<view v-for="(item, index) in list" :key="index">
{{ item.name }}
</view>
</view>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => []
}
},
methods: {
// 其他相关逻辑
}
}
</script>
```
在使用该组件的页面中,可以这样调用:
```
<template>
<view>
<common-list :list="myList"></common-list>
</view>
</template>
<script>
import CommonList from './common-list.vue'
export default {
components: {
CommonList
},
data() {
return {
myList: [
{ name: 'item1' },
{ name: 'item2' },
{ name: 'item3' }
]
}
}
}
</script>
```
希望这些信息能帮助到你。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)