【uni-app从入门到实战】资讯列表

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

今天我们在之前建好的文件 news.vue 中完成资讯列表，先看代码：

<template>
	<view class="news">
		<view class="news_item" v-for="(item,index) in newsList" :key='index'>
			<image :src="item.goods_small_logo"></image>
			<view class="right">
				<view class="title">{{item.goods_name}}</view>
				<view class="info">￥{{item.goods_price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList:[]
			}
		},
		methods: {
			async getNews(){
				const res = await this.$myRequest({
					url:'/api/public/v1/goods/search',
					data: {
						query: '零食'
					}
				})
				this.newsList = res.data.message.goods
			},
		},
		onLoad() {
			this.getNews()
		}
	}
</script>

<style lang="scss">
.news{
	.news_item{
		display: flex;
		padding: 10rpx 20rpx;
		border-bottom: 1px solid $shop-color;
		image{
			width: 200rpx;
			height: 200rpx;
			min-width: 200rpx;
			min-height: 200rpx;
		}
		.right{
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				font-size: 30rpx;
			}
			.info{
				font-size: 24rpx;
			}
		}
		
	}
}
</style>

运行程序如图：

由于我们没有真实的资讯列表的接口，我们用之前的商品列表搜索接口来做，和之前的功能一样的，编写请求接口的方法，然后在 onLoad 中调用，如果不清楚返回数据结构，可以 console.log 打印下，之前都写过了，这里不再赘述，然后给 data 中的 newsList 赋值，然后使用 v-for 来循环展示数据即可

完成之后，我们可以把资讯展示部分封装成为 news-item 组件，在 components 中新建 news-item.vue 组件，然后把刚才的 news-item 部分复制过来，同时把相应的样式拿过来，news-item.vue 完整代码如下：

<template>
	<view>
	<view class="news_item" v-for="(item,index) in list" :key='index'>
		<image :src="item.goods_small_logo"></image>
		<view class="right">
			<view class="title">{{item.goods_name}}</view>
			<view class="info">￥{{item.goods_price}}</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		props:['list']
	}
</script>


<style lang="scss">
	.news_item{
		display: flex;
		padding: 10rpx 20rpx;
		border-bottom: 1px solid $shop-color;
		image{
			width: 200rpx;
			height: 200rpx;
			min-width: 200rpx;
			min-height: 200rpx;
		}
		.right{
			margin-left: 15rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title{
				font-size: 30rpx;
			}
			.info{
				font-size: 24rpx;
			}
		}
		
	}
</style>

然后我们修改 news.vue，首先使用 import 引入 news-item 组件，然后在 components 中注册，然后可以在页面中使用了，我们放在之前资讯部分即可。由于是要循环数据，所以我们需要把这个页面获取的值传递过去，也就是使用:list=newsList传过去，我们看 news.vue 的完整代码：

<template>
	<view class="news">
		<news-item :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.$myRequest({
					url:'/api/public/v1/goods/search',
					data: {
						query: '零食'
					}
				})
				this.newsList = res.data.message.goods
			},
		},
		components:{
			'news-item':newsItem
		},
		onLoad() {
			this.getNews()
		}
	}
</script>

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

相应的，我们再看刚才 news-item.vue 中，我们使用了 props来接收刚才传过来的值，然后在循环时，也使用 list 这个变量循环即可