uniapp中uni-list的使用

在uniapp中，我们可以使用uni-list来创建列表。首先，需要将相关组件导入到js文件中，例如导入uni-list和uni-list-item组件。可以使用以下代码导入组件:
import uniList from '@/components/uni-list/uni-list.vue';
import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
import uniAd from '@/components/uni-list-ad/uni-list-ad.vue';
import uniChat from '@/components/uni-list-chat/uni-list-chat.vue';

然后，在模板中使用uni-list和uni-list-item来创建列表。可以参考以下代码示例:
<template>
<view class="content">
<!-- 老人列表 -->
<uni-list v-for="(item,index) in oldManList" :key="index">
<uni-list-item :title="item.name" @click="onClick" show-arrow="true" link ></uni-list-item>
</uni-list>
</view>
</template>

最后，在导出的组件中，将uniList和uniListItem添加到组件的components属性中，以便在模板中使用这些组件。可以参考以下代码示例:
export default {
components:{
uniList,
uniListItem,
uniAd,
uniChat
},
data() {
return {
oldManList: [
{ name: "蟹老板" },
{ name: "派大星" },
]
};
},
methods: {
onClick(e) {
console.log('执行click事件', e)
}
},
};

这样，你就可以在uniapp中使用uni-list组件来创建列表了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [uniapp uni-list-item @click,uniapp uni-list-item带参数跳转](https://blog.csdn.net/sun6223508/article/details/125483061)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [uni-list的插件导入及使用方法](https://blog.csdn.net/weixin_57607714/article/details/124297818)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]