uniapp——实现新闻列表根据奇偶数来呈现

首先，通过v-for循环得到新闻列表

如果得到的数据是这种类型

[
{
"id":1,
"type":1,
"newsName":"***",
"newsTypeName":"***",
"img1":"/**/**/**/*news1.png",
"img2":"",
"img3":"",
"newsUrl":"***"
},
{
"id":2,
"type":2,
"newsName":"***",
"newsTypeName":"***",
"img1":"/**/**/**/ios1.png",
"img2":"/**/**/**/ios2.png",
"img3":"/**/**/**/ios3.png",
"newsUrl":"***"
},
{
"id":3,
"type":1,
"newsName":"***",
"newsTypeName":"***",
"img1":"/**/**/**/college.png",
"img2":"",
"img3":"",
"newsUrl":"***"
},
{
"id":4,
"type":2,
"newsName":"***",
"newsTypeName":"***",
"img1":"/**/**/**/python1.png",
"img2":"/**/**/**/python2.png",
"img3":"/**/**/**/python3.png",
"newsUrl":"***"
}
]

当得到这种json数据时，可以通过判断他的type来分为奇偶数行。

把得到的数据放在列表中输出

<!-- 新闻 -->
		<uni-list v-for="(item,index) in news">
			<uni-list-item>
				<template v-slot:body v-if="item.type == 1">
					<uni-row>
						<image :src="item.img1" style="width: 120px;height:60px;margin-right: 5px; "
							mode="aspectFill"></image>
					</uni-row>
					<text>{{item.newsName}}</text>
					<uni-row>
						<text style="font-size: 14px; color: gray;">{{item.newsTypeName}}</text>
					</uni-row>
				</template>
				<template v-slot:body v-if="item.type == 2">
					<uni-row>
						<text>{{item.newsName}}\n</text>
						<image style="width: 120px;height: 80px;" :src="item.img1" mode="aspectFill">
						</image>
						<image style="width: 120px;height: 80px;" :src="item.img2" mode="aspectFill">
						</image>
						<image style="width: 120px;height: 80px;" :src="item.img3" mode="aspectFill">
						</image>
					</uni-row>
				</template>
			</uni-list-item>
		</uni-list>

<script>
	export default {
		data() {
			return {
				news: {},
			};
		},
		onLoad() {
			this.getNews();
		},
		methods: {
			getNews() {
				uni.request({
					url: '你的服务器数据地址',
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data);
						this.news = res.data;
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
</style>

 

 先用vfor语句把新闻列表全输出，然后再用v-if（或v-show）来根据type等于1还是2

来显示不同的图片行，定义一个news容器来存放获取的新闻信息。具体的图片大小以及显示的内容要根据自身需求来调整

注意：写在<uni-list-item>中的数据要添加一个template模块来显示（<template v-slot:body>），如果你的列表没有显示出数据，而数据的获取没问题的话，一般就是没有用template模块

作者声明：由于本人才疏学浅，本文可能会出现错误，望诸位海涵