ユニリストプラグインのインポートと使用法

最初に新しいプロジェクトを作成し、2番目のhello uni-appのテンプレートを選択し、次の4つのフォルダーを見つけて、ローカルプロジェクトにコピーします。

 

コードをコピーしてjsにインポートするためにuni-lisを使用する必要があるコンポーネント

    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>