如何封装uni-app资讯列表组件，实现渲染？
摘要：一、概述 上一篇文章，已经实现了社区图片右侧数据渲染，预览图片。 接下来，实现资讯列表结构，数据渲染，news-item组件封装 效果如下： 二、资讯列表结构 修改 pagesnewsnews.uvue文件，固
一、概述
上一篇文章，已经实现了社区图片右侧数据渲染，预览图片。
接下来，实现资讯列表结构，数据渲染，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
重新编译，效果如下：