<template>
	<view>
		<uni-list>
			<uni-list>
				<!-- 垂直排列，略缩图显示大图 -->
				<uni-list-item direction="column" note="Dcloud 128评论 21 赞">
					<template v-slot:header>
						<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
						<view class="uni-thumb uni-content list-picture">
							<image src="/static/logo.png" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
				<!-- 垂直排列，图文混排 -->
				<uni-list-item direction="column">
					<template v-slot:header>
						<view class="uni-title">垂直排列的图文混排列表，内容通过 body 插槽实现，底部通过 footer 插槽实现完全自定样式</view>
					</template>
					<template v-slot:body>
						<view class="uni-list-box">
							<view class="uni-thumb">
								<image src="/static/logo.png" mode="aspectFill"></image>
							</view>
							<view class="uni-content">
								<view class="uni-title-sub uni-ellipsis-2">这里是列表的副标题，最多可以显示两行，多余文字会隐藏并显示省略号</view>
								<view class="uni-note">Dcloud 128评论 21 赞</view>
							</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="uni-footer">
							<text class="uni-footer-text">评论</text>
							<text class="uni-footer-text">点赞</text>
							<text class="uni-footer-text">分享</text>
						</view>
					</template>
				</uni-list-item>
				<!-- 垂直排列，略缩图显示多图 -->
				<uni-list-item direction="column" title="" note="Dcloud 128评论 21 赞">
					<template v-slot:header>
						<view class="uni-title">垂直排列的多图列表，多图通过 body 插槽实现完全自定样式</view>
					</template>
					<template v-slot:body>
						<view class="content uni-media-box">
							<image v-for="img in 3" :key="img" class="uni-thumb" src="/static/logo.png"
								mode="aspectFill"></image>
						</view>
					</template>

					<template v-slot:footer>
						<view class="uni-footer">
							<text class="uni-footer-text">评论</text>
							<text class="uni-footer-text">点赞</text>
							<text class="uni-footer-text">分享</text>
						</view>
					</template>
				</uni-list-item>
				<!-- 水平排列，左图右文 -->
				<uni-list-item title="水平排列的左图右文列表，图片通过 header 插槽完全自定义" note="Dcloud 128评论 21 赞">
					<template v-slot:header>
						<view class="uni-thumb">
							<image src="/static/logo.png" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
				<!-- 水平排列，右图左文 -->
				<uni-list-item title="水平排列的右图左文列表，图片通过 footer 插槽完全自定义" note="Dcloud 128评论 21 赞">
					<template v-slot:footer>
						<view class="uni-thumb" style="margin: 0;">
							<image src="/static/logo.png" mode="aspectFill"></image>
						</view>
					</template>
				</uni-list-item>
				<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
				<uni-list-item direction="column">
					<template v-slot:header>
						<view class="uni-title">垂直排列的无图列表，现在主标题+副标题</view>
					</template>
					<template v-slot:body>
						<view class="uni-list-box">
							<view class="uni-content">
								<view class="uni-title-sub uni-ellipsis-2">这里是副标题 ，一般显示详情概览</view>
								<view class="uni-note">Dcloud 128评论 21 赞</view>
							</view>
						</view>
					</template>
					<template v-slot:footer>
						<view class="uni-footer">
							<text class="uni-footer-text">评论</text>
							<text class="uni-footer-text">点赞</text>
							<text class="uni-footer-text">分享</text>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-list>
		<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
		<!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
	</view>
</template>

<script>
	// mode = 1 垂直排列，略缩图显示大图
	// mode = 2 垂直排列，图文混排
	// mode = 3 垂直排列，略缩图显示多图
	// mode = 4 水平排列，左图右文
	// mode = 5 水平排列，右图左文
	// mode = 6 垂直排列，无略缩图，主标题+副标题显示
	export default {
		components: {},
		data() {
			return {
				// // 数据表名
				// collection: 'opendb-news-articles',
				// // 查询字段，多个字段用 , 分割
				// field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
				formData: {
					status: 'loading' // 加载状态
				},
				tipShow: false, // 是否显示顶部提示框
				lists: [{
						"id": 121375,
						"post_id": "5310910",
						"title": "为什么自动驾驶诉讼不断？",
						"author_name": "未来汽车日报",
						"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
						"published_at": "2020-04-11 17:07:48",
						"content": "",
						"mode": 1
					},
					{
						"id": 121374,
						"post_id": "5310906",
						"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
						"author_name": "36氪深度服务",
						"cover": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
						"published_at": "2020-04-11 16:59:15",
						"content": "",
						"mode": 2
					},
					{
						"id": 121373,
						"post_id": "5310903",
						"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
						"author_name": "未来汽车日报",
						"cover": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
						"published_at": "2020-04-11 16:09:09",
						"content": "",
						"mode": 3
					},
					{
						"id": 121372,
						"post_id": "5310813",
						"title": "救命呼吸机缺口难补！一文扒开供应链真相",
						"author_name": "智东西",
						"cover": "https://img.36krcdn.com/20200410/v2_86bbf8245f754be79f3386a82b385093_img_000",
						"published_at": "2020-04-11 15:40:02",
						"content": "",
						"mode": 4
					},
					{
						"id": 121371,
						"post_id": "5309573",
						"title": "每月节省32%的开支，我是怎么做到的？",
						"author_name": "神译局",
						"cover": "https://img.36krcdn.com/20200408/v2_c67c3edfe4b5446992b32fad93a44a75_img_png",
						"published_at": "2020-04-11 14:48:02",
						"content": "",
						"mode": 5
					},
					{
						"id": 121369,
						"post_id": "5310859",
						"title": "瓜子坚果双增长，但洽洽并不能高枕无忧",
						"author_name": "资本侦探",
						"cover": "https://img.36krcdn.com/20200411/v2_2204c6132432403184e43df22485545e_img_000?x-oss-process=image/resize,m_mfit,w_432,h_288/crop,w_432,h_288,g_center",
						"published_at": "2020-04-11 14:23:00",
						"content": "",
						"mode": 6
					},
					{
						"id": 121367,
						"post_id": "5309137",
						"title": "克服危机和压力，精神力量强大的人都有这5个习惯",
						"author_name": "神译局",
						"cover": "https://img.36krcdn.com/20200406/v2_d2c6a686b4074a1eb43603e67d6ba204_img_png",
						"published_at": "2020-04-11 13:47:01",
						"content": "",
						"mode": 1
					},
					{
						"id": 121365,
						"post_id": "5310864",
						"title": "神州租车找爹记",
						"author_name": "PingWest品玩",
						"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
						"published_at": "2020-04-11 13:39:00",
						"content": "",
						"mode": 1
					}
				]
			};
		},
		onLoad() {},
		methods: {

			load(data, ended) {
				if (ended) {
					this.formData.status = 'noMore'
				}
			}
		},
		/**
		 * 下拉刷新回调函数
		 */
		onPullDownRefresh() {
			this.formData.status = 'more'
			this.$refs.udb.loadData({
				clear: true
			}, () => {
				this.tipShow = true
				clearTimeout(this.timer)
				this.timer = setTimeout(() => {
					this.tipShow = false
				}, 1000)
				uni.stopPullDownRefresh()
			})
		},
		/**
		 * 上拉加载回调函数
		 */
		onReachBottom() {

		}
	};
</script>


<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
