基于《黑马商城》项目，分析uniapp中实现资讯列表（或者对象罗列列表）

本篇文章中，基于《黑马商城》项目，

我们分析uniapp中一种常用页面（列表式的资讯页面，或者商品列表页面），

我们从布局和for循环对象列表（实现）两个方面来进行分析。

这种常见布局如下：

（由于后端代码链接图床有问题，所以图片显示不出来，不影响我们后面分析） 

---

此处我们采用自己封装一个组件为子组件的方式，来实现这个页面。

news.vue代码如下：

<template>
	<view class="news">
		<news-item @itemClick="goDetail" :list="newsList"></news-item>
	</view>
</template>

<script>
	import newsItem from '../../components/news-item/news-item.vue'
	export default {
		data() {
			return {
				newsList: []
			}
		},
		methods: {
			async getNews () {
				const res = await this.$myRuquest({
					url: '/api/getnewslist'
				})
				this.newsList = res.data.message
			},
			goDetail (id) {
				uni.navigateTo({
					url: '/pages/news-detail/news-detail?id='+id
				})
			}
		},
		components: {"news-item":newsItem},
		onLoad () {
			this.getNews()
		}
	}
</script>

<style lang="scss">
	.news {
		
	}
</style>

这里使用到了uniapp提供的生命周期函数 onLoad，用于监听页面加载

一些uniapp官网提供页面生命周期函数整理如下：

onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onShareAppMessage	用户点击右上角分享
onPageScroll	监听页面滚动，参数为Object
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为Object
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解。支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）
onShareTimeline	监听用户点击右上角转发到朋友圈
onAddToFavorites	监听用户点击右上角收藏

在onLoad生命周期函数中，调用getNews()方法

getNews()方法在methods中进行定义。 

在getNews()方法中，将获取到的资讯对象数据保存在newsList中。

---

 引入组件news-item

首先使用import导入，并在components中注册

import newsItem from '../../components/news-item/news-item.vue'

	components: {"news-item":newsItem},

在html代码中使用

	<view class="news">
		<news-item @itemClick="goDetail" :list="newsList"></news-item>
	</view>

触发事件是itemClick，父组件传入的属性是list

---

在news-item组件中，代码如下：

<template>
	<view>
		<view class="news_item" @click="navigator(item.id)" v-for="item in list" :key="item.id">
			<image :src="item.img_url"></image>
			<view class="right">
				<view class="tit">
					{{item.title}}
				</view>
				<view class="info">
					<text>发表时间：{{item.add_time | formatDate}}</text>
					<text>浏览：{{item.click}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

每个对象item由对list for循环获得，

对于点击每个对象的事件navigator(item.id)，触发父组件的itemClick事件。

---

对象布局展示如下：

下面分析对象的布局

 每个对象的布局分为左部和右部，

左部为图片

右部上方为标题，标题下方为发表时间和浏览次数

总体class名为news_item

 css代码如下：

	.news_item{
		display: flex;
		padding: 10rpx 20rpx;
		border-bottom: 1px solid $shop-color;
		image{
			min-width: 200rpx;
			max-width: 200rpx;
			height: 150rpx;
		}
		.right{
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.tit{
				font-size: 30rpx;
			}
			.info{
				font-size: 24rpx;
				text:nth-child(2){
					margin-left: 30rpx;
				}
			}
		}
	}

 news_item总体布局采用flex：

        对于图片，设置图片的最小宽度和最大宽度，限制住宽度，防止被伸缩。

        对于右侧，仍然采用flex布局，采用垂直方向，justify-content: space-between;会将元素两边贴边对齐。

                在info对象中，info中第二个text元素，左侧margin设置为30rpx

                :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

                        n 可以是一个数字，一个关键字，或者一个公式。