一、概述
上一篇文章，已经实现了社区图片右侧数据渲染，预览图片。
接下来，实现资讯列表结构，数据渲染，news-item组件封装
效果如下：
二、资讯列表结构
修改 pages/news/news.uvue文件，固定一行数据
完整代码如下：
<template><view><!-- 资讯 --><view class="news"><view class="news_item"><image src="https://picsum.photos/600/400?random=1"></image><view class="right"><view class="title">1季度多家房企利润跌幅超50% 去库存促销战打响</view><view class="info"><text>发表时间：2015-04-16</text><text>浏览: 3</text></view></view></view></view></view> </template><script>export default {data() {return {}},methods: {}} </script><style lang="scss">.news {.news_item {display: flex;padding: 10rpx 20rpx;border-bottom: 1px solid $shop-color;// 子元素自动水平排列flex-direction: row;image {width: 200rpx;height: 150rpx;min-width: 200rpx;max-width: 200rpx;}.right {// 占满剩余宽度flex: 1;margin-left: 15rpx;// 与图片同高 height: 150rpx;display: flex;// 弹性布局 侧轴显示flex-direction: column;// 两边对齐justify-content: space-between;.title {font-size: 30rpx;}.info {display: flex;flex-direction: row;text {font-size: 24rpx;}text:nth-child(2) {margin-left: 40rpx;}}}}} </style>
编译运行，效果如下：
三、数据渲染
数据获取
调用api接口
async getNews() {const res = await this.$http.get('/api/getnewslist', {})this.newsList = res.message;console.log("资讯数据", this.newsList); },
数据渲染
修改 pages/news/news.uvue文件，增加变量newsList，进行for循环
完整代码如下：
<template><view><!-- 资讯 --><view class="news"><view class="news_item" v-for="(item,index) in newsList" :key="item.id"><image :src="item.img_url"></image><view class="right"><view class="title">{{item.title}}</view><view class="info"><text>发表时间：{{cut_data(item.add_time)}}</text><text>浏览: {{item.click}}</text></view></view></view></view></view> </template><script>export default {data() {return {newsList: []}},onLoad() {this.getNews()},methods: {async getNews() {const res = await this.$http.get('/api/getnewslist', {})this.newsList = res.message;console.log("资讯数据", this.newsList);},// 截取日期 cut_data(time_str) {const date = time_str.split('T')[0];return date;}}} </script><style lang="scss">.news {.news_item {display: flex;padding: 10rpx 20rpx;border-bottom: 1px solid $shop-color;// 子元素自动水平排列flex-direction: row;image {width: 200rpx;height: 150rpx;min-width: 200rpx;max-width: 200rpx;}.right {// 占满剩余宽度flex: 1;margin-left: 15rpx;// 与图片同高 height: 150rpx;display: flex;// 弹性布局 侧轴显示flex-direction: column;// 两边对齐justify-content: space-between;.title {font-size: 30rpx;}.info {display: flex;flex-direction: row;text {font-size: 24rpx;}text:nth-child(2) {margin-left: 40rpx;}}}}} </style>
编译运行，效果如下：
四、news-item组件封装
如果别的页面，也需要显示资讯列表，再重写一遍代码，比较浪费。
因此我们可以将资讯列表数据，封装成一个组件， news-item
在项目根目录的components下，创建文件夹news-item，然后在里面创建文件news-item.uvue
目录结构如下：
components ├── goods-list │ └── goods-list.uvue └── news-item└── news-item.uvue
将 pages/news/news.uvue文件里面的部分内容，copy到news-item.uvue
news-item.uvue完整内容如下：
<template><view><view class="news_item" v-for="(item,index) in newsList" :key="item.id"><image :src="item.img_url"></image><view class="right"><view class="title">{{item.title}}</view><view class="info"><text>发表时间：{{cut_data(item.add_time)}}</text><text>浏览: {{item.click}}</text></view></view></view></view> </template><script>export default {//接收父组件传递的值props: ['newsList'],methods: {// 截取日期 cut_data(time_str) {const date = time_str.split('T')[0];return date;}}} </script><style lang="scss">.news_item {display: flex;padding: 10rpx 20rpx;border-bottom: 1px solid $shop-color;// 子元素自动水平排列flex-direction: row;image {width: 200rpx;height: 150rpx;min-width: 200rpx;max-width: 200rpx;}.right {// 占满剩余宽度flex: 1;margin-left: 15rpx;// 与图片同高 height: 150rpx;display: flex;// 弹性布局 侧轴显示flex-direction: column;// 两边对齐justify-content: space-between;.title {font-size: 30rpx;}.info {display: flex;flex-direction: row;text {font-size: 24rpx;}text:nth-child(2) {margin-left: 40rpx;}}}} </style>
最后将 pages/news/news.uvue文件里面的部分内容删除掉，引用news-item组件
news.uvue完整内容如下：
<template><view><!-- 资讯 --><view class="news"><news-item :newsList="newsList"></news-item></view></view> </template><script>import newsPageDataList from '../../components/news-item/news-item.uvue'export default {components: {"news-item": newsPageDataList},data() {return {newsList: []}},onLoad() {this.getNews()},methods: {async getNews() {const res = await this.$http.get('/api/getnewslist', {})this.newsList = res.message;console.log("资讯数据", this.newsList);},}} </script><style lang="scss">.news {} </style>
说明：
这里引用news-item组件，并传递参数newsList
重新编译，效果如下：