uni-list的插件导入及使用方法

最新推荐文章于 2024-12-20 09:15:00 发布

爬楼梯的小新

最新推荐文章于 2024-12-20 09:15:00 发布

阅读量3.9k

点赞数 1

分类专栏： uniapp 文章标签： uniapp

本文链接：https://blog.csdn.net/weixin_57607714/article/details/124297818

版权

uniapp 专栏收录该内容

28 篇文章

订阅专栏

首先新建一个项目选择第二个hello uni-app的模板找到以下四个文件夹复制到自己本地项目中

哪个组件需要使用uni-lis 就将代码复制导入进js中

    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';

看下完整代码:

<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>

<script>
	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';
	export default {
		components:{
			uniList,uniListItem,uniAd,uniChat
		},
		data() {
			return {
				oldManList: [{
						name: "蟹老板"
					},
					{
						name: "派大星"
					},
				],
		
			};
		},
		methods: {
		  onClick(e) {
			  console.log('执行click事件', e)				
		  }
		},
	};
</script>