如何使用colorui的列表

本文已参与「新人创作礼」活动，一起开启掘金创作之路

前言，最近在业余时间做一个关于拼音的小程序，并且在逐步完善，想增加一个栏目，用到列表，所以记录下来

首先说下我用的组件库是ColorUI，ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库。今天叫大家如何使用里面的列表，列表里有各种类型的列表，大家可以选择自己喜欢的列表

我选择的就这个列表

找到对应的代码

经过一番的调整就是这样了

	<view>
		<scroll-view class="page" >
			<view class="cu-bar bg-white solid-bottom margin-top">
				<view class="action">
					<text class="cuIcon-title text-orange"></text> 各年级汉字拼音练习
				</view>
			</view>
			<view class="cu-list menu" >
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">一年级</text>
					</view>
				</view>
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">二年级</text>
					</view>
				</view>
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">三年级</text>
					</view>
				</view>
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">四年级</text>
					</view>
				</view>
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">五年级</text>
					</view>
				</view>
				<view class="cu-item" >
					<view class="content">
						<text class="cuIcon-circlefill text-grey"></text>
						<text class="text-grey">六年级</text>
					</view>
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {

		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

</style>

至此，列表就完成了,如果有什么地方写的不好请多多指教