文章列表制作-文章卡片

一、创建文章相关listItem组件

​ 使用scroll-view 实现竖向滚动容器制作，注意在样式定义时进行多级高度设定

<view class="list-scroll-container">
		<scroll-view scroll-y="true" class="list-scroll">
			<view>
				<ListCard v-for="item in 50" :key="item"></ListCard>
			</view>
		</scroll-view>
</view>

二、文章卡片组件定义

1. 创建基本样式及结构

2. 定义多状态卡片模块

   1. 通过父组件传递mode属性进行条件编译

   2. 根据条件进行选项卡卡片展示

三、定义uniapp模版

1. 根目录下创建index.html文件

2. 参考地址：https://uniapp.dcloud.io/collocation/manifest?id=h5-template

3. manifest文件的html5配置中进行index.html文件引入

​