博客列表页就会把我博客的文章的分类以导航的形式展现出来，点击不同的分类显示不同的文章，由于之前已经自定义了ArticleList组件，那么列表直接拿来用就行了。导航的话需要用到滑动效果，可以使用小程序自带的组件scroll-view即可，不过样式得调整一下。
blog.wxml代码如下：
<TopBanner></TopBanner>
<view class="container">
<scroll-view class="topMenu" scroll-x="true"><text bindtap="handleMenu" data-router="{{item.router}}" class="item {{currentRouter===item.router?'active':''}}" wx:key="_id" wx:for="{{menuList}}">{{item.name}}</text></scroll-view>
<ArticleList articleList="{{articleList}}"></ArticleList>
</view>活动中的导航，会有一个下划线，通过伪类来实现，以下是blog.wxss代码：
.topMenu {
padding: 20rpx 0;
white-space: nowrap;
}
.topMenu .item {
margin-right: 60rpx;
display: inline-block;
color: var(--secondaryColor);
height: 55rpx;
}
.topMenu .active {
color: var(--mainColor);
position: relative;
}
.topMenu .active::after {
content: "";
position: absolute;
width: 60%;
height: 1px;
left: 20%;
background-color: var(--mainColor);
bottom: 0rpx;
}js代码也比较简单，主要是思路就是，先获取文章分类列表，渲染后，如果是当前分类，则添加class=active。然后添加到本地缓存，每次加载时判断缓存有没有过期，没过期则直接从缓存中获取，其他代码基本和首页文章调用差不多。
// pages/blog/blog.js
import http from '../../utils/http'
import {langtodata} from '../../utils/formatDate'
Page({
/**
* 页面的初始数据
*/
data: {
menuList: [],
currentRouter: '',
articleList:[],
lastID:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function () {
const topmenu = wx.getStorageSync('topmenu')
if (!topmenu) { //如果没有缓存
this.getMenu()
} else {//超过1小时重新获取
if (Date.now() - topmenu.time > 1000 * 60 * 60) {
this.getMenu()
} else {
this.setData({
menuList: topmenu.data,
currentRouter: topmenu.data[0].router
})
this.getArticle()
}
}
},
getArticle() {
http({
url: `/article/catalog/${this.data.currentRouter}/10/${this.data.lastID}`
}).then((res) => {
let length = res.data.length
if (length > 0) {
this.data.lastID = res.data[length - 1]._id
let list = res.data.map(item => {
item.createDatetime = langtodata(item.createDatetime)
return item
})
this.setData({
articleList: this.data.articleList.concat(list)
})
} else {
wx.showToast({
title: '没有更多啦',
mask: true,
duration: 1000
})
}
}).catch((err) => {
console.log('获取文章列表错误', err)
})
},
handleMenu(e) {
const router = e.currentTarget.dataset.router
this.data.lastID=''
this.setData({
currentRouter: router,
articleList:[]
})
this.getArticle()
},
getMenu() {
http({
url: '/catalog/enable'
}).then((res) => {
wx.setStorageSync('topmenu', {
time: Date.now(),
data: res.data
})
this.setData({
menuList: res.data,
currentRouter: res.data[0].router
})
this.getArticle()
}).catch((err) => {
wx.showToast({
title: '获取菜单错误!',
icon: 'error',
duration: 1000
})
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.getArticle()
}
})好了，最后就是关于页面啦。
第十三篇：和我一起学习微信小程序(十三)，关于页面