文章列表制作
就是从接口获取数据,然后将数据解析,v-for循环遍历,即可得到效果
因为代码后期做了很多优化,不是本节的内容,如果发现有些代码看起来没什么关联,说明那是后续要修改的。
项目地址:https://github.com/cctyl/sunofbeach_mobile.git
实现
这一节相对来说比较简单。
请求地址是 /ct/content/home/recommend/${page}
以及 /ct/content/home/recommend/${categoryId}/${page}
第一个是获取推荐页面的数据,第二个是根据标签id获取当前标签下的文章数据
我们先做推荐页面的数据加载。
在data中初始化
recommendArticleList: [], //获得推荐文章列表
创建一个方法,在这里,我们直接把推荐页数据和 其他标签页数据的代码一起写好
根据 currentTagId 来判断现在处于推荐页,还是普通标签页,不同的页面请求不同的数据
async getArticleList(page = 1, isMerge = false) {
let result = null
//如果有categoryId,说明获取的是标签数据,如果没有,那获取的就是推荐页面的数据
if (this.currentTagId) {
console.log('获取文章数据,不是推荐页,id为:' + this.currentTagId)
result = await api.getArticleListByCategoryId(this.currentTagId, page)
} else {
console.log('获取文章数据,是推荐页,id为:' + this.currentTagId)
result = await api.getRecommendArticleList(page)
}
this.recommendArticleList = result.data.list
},
页面上,我们写好结构,把数据填进去就行,结构如下:
<!--文章列表 -->
<div id="totalScroll">
<ul class="articleList">
<!--文章详情-->
<li class="articleItem" v-for="item in recommendArticleList" :key="item.id"
@click="toArticleDetail(item.id)">
<div class="left">
<img :src="item.covers[0]" alt="">
</div>
<div class="right">
<h2 class="title">{{item.title}}</h2>
<div class="articleInfo">
<span class="author articleInfoItem">{{item.nickName}}</span>
<span class="viewCount articleInfoItem">{{item.viewCount}}阅读</span>
<span class="thumbUp articleInfoItem">{{item.thumbUp}}点赞</span>
</div>
</div>
</li>
</ul>
</div>
/*---------------文章列表 start---------------*/
.articleItem {
box-sizing: border-box;
padding: 13px 17px 8px;
min-height: 83px;
width: 100%;
border-bottom: 1px solid #e4e4e4;
display: flex;
}
.articleItem .title {
line-height: 130%;
font-size: 20px;
font-weight: 500;
}
.articleInfo {
display: flex;
margin-top: 10px;
font-size: 13px;
}
.articleInfoItem {
margin-right: 10px;
}
.articleItem .left img {
overflow: hidden;
border-radius: 5px;
height: 60px;
width: 60px;
margin-right: 20px;
}
/*---------------文章列表 end---------------*/
初次之外,还要改一个地方,就是之前的标签栏。标签栏上添加点击事件,点击之后更新 currentTargetId,并重新请求文章数据。
/**
* 切换标签页的回调
* @param tagIndex
*/
changeTag(tagIndex, tagItem) {
console.log('切换了页面')
this.currentTag = tagIndex
//如果不是推荐页,那么这个tagItem是有值的
if (tagItem) {
console.log('不是推荐页,是' + tagItem.categoryName)
this.currentTagId = tagItem.id
} else {
console.log('是推荐页')
//如果是推荐页,那么将currentTagId置为null
this.currentTagId = null
}
this.getArticleList(1, false)
},