效果概述
列表页面显示数据，点击跳转到对应的详情页，实现分页效果，点击回到顶部
具体效果
1.移动端适配 2.样式符合ui效果 3.处理时间格式 4.分页效果（上一页，下一页） 5.点击回到顶部效果（详情页和列表页都需实现） 6.解决接口跨域请求访问问题 7.路由跳转无bug 8.列表页面显示数据，点击跳转到对应的详情页
实现后效果图：
AlloyTeam（腾讯全端博客）
大致代码思路：
- 根页面：
使用 div 标签实现更多 router-view 标签接收数据 使用 router-link 实现回到顶部
列表页：
在 main.js 页面引入 axios 插件
在 main.js 页面引入 rem 移动端适配代码
在 main.js 页面引入 dayjs 处理时间格式插件
通过 rem 进行移动端适配
通过 axios 接口地址请求数据
通过 dayjs 处理时间格式
把请求到的数据赋值给data里的选项
在 html 代码中通过 v-for 实现循环，把数据渲染至视图中
通过正则获取到对象里的所有数字
用编程式导航实现跳转功能，并把列表的 id 通过 query 传递至跳转后的页面
通过 router-link 实现分页效果的跳转
通过路由滚动行为实现回到顶部效果
详情页：
使用 this.$route.query.id 获取上个页面通过 query 传递的 id 值
使用 axios 接口地址和接收到的 id 值请求详细数据
把请求到的数据赋值给data里的选项
把数据渲染到视图中
main.js代码：
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false // 引入rem适配 import '@/rem' // 引入 axios import axios from 'axios' //可以全局使用$axios Vue.prototype.$axios = axios // 引入dayjs import dayjs from "dayjs" //可以全局使用dayjs Vue.prototype.dayjs = dayjs; new Vue({ router, store, render: h => h(App) }).$mount('#app')
rem 适配页面代码：
const WIDTH = 375//如果是尺寸的设计稿在这里修改 const setView = () => { //设置html标签的fontSize document.documentElement.style.fontSize = (100 * document.documentElement.clientWidth / WIDTH) + 'px' } window.onresize = setView setView()
决跨域问题，在vue.config.js里添加代码
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, // 下面是解决跨域问题需要添加的内容 devServer:{ proxy:{ '/api':{ target:'http://118.190.39.123:8877/ ', // http://118.190.39.123:8877/ === /api pathRewrite:{ '^/api':'' // 重写 } } } } })
实现路由跳转页代码：
import Vue from 'vue' import VueRouter from 'vue-router' import HomeOne from '../views/HomeOne.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'HomeOne', component: HomeOne }, { path: '/Details', name: 'Details', component: ()=>import('@/views/Details.vue') }, ] const router = new VueRouter({ // 只有调用了history.pushState()的时候才会触发这个方法 mode: 'history', base: process.env.BASE_URL, routes, // 使用这个方法实现期望滚动到哪一位置， scrollBehavior (to, from, savedPosition) { console.log(to,from,savedPosition); // 滚动到锚点 if (to.hash) { return { selector: to.hash, // 平滑滚动 behavior: 'smooth', } } } }) export default router
根页面代码：
<template> <div id="app"> <!-- 头部 --> <div class="HomeTop"> <!-- 更多 --> <div class="dian"> <span></span> </div> </div> <!-- 返回顶部 --> <router-link tag="div" to="#app" class="back">▲</router-link> <router-view></router-view> <!-- 底部 --> <div class="bottom">Copyright © 2022 AlloyTeam</div> </div> </template> <script> export default {}; </script> <style lang="scss"> * { margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; } </style> <style lang="scss" scoped> #app { .HomeTop { width: 100%; height: 0.42rem; padding: 0 0.15rem; // background-color: red; border-bottom: 1px solid #ece7e7; display: flex; align-items: center; .dian { width: 0.17rem; height: 0.15rem; border-top: 1px solid black; border-bottom: 1px solid black; display: flex; align-items: center; span { display: inline-block; width: 100%; height: 1px; background-color: black; } } } .back { width: 0.4rem; height: 0.4rem; text-align: center; line-height: 0.4rem; background-color: rgba(0, 0, 0, 0.1); position: fixed; bottom: 0.4rem; right: 0.15rem; font-size: 0.17rem; } .bottom { color: rgba(0, 0, 0, 0.44); font-size: 0.12rem; text-align: center; margin: 0.4rem 0 0.1rem; } } </style>
列表页代码：
<template> <div class="box"> <div class="HomeTitle"> <h1>AlloyTeam</h1> <p>腾讯全端 AlloyTeam 团队 Blog</p> </div> <ul class="HomeList"> <!-- 循环 --> <li v-for="item in list" :key="item.id"> <!-- 文章标签 数组转换为字符串 --> <p class="web">{{ item.tags.toString() }}</p> <!-- 标题，点击跳转到详情 --> <h1 class="title" @click="next(item.id)">{{ item.title }}</h1> <!-- 作者和图片 --> <span class="author"> <!-- <img :src="item.avatar" alt="" /> --> {{ item.author }} </span> <p class="separator"> <!-- 使用dayjs转换时间格式 --> {{ dayjs(item.date).format("YYYY-MM-DD") }} / <!-- 用正则方法获取浏览次数 --> {{ item.separator.match(/\d+/g).toString() }} 次浏览 </p> <!-- 概述 --> <p class="content">{{ item.summary }}</p> </li> </ul> <div class="bottom"> <!-- 跳转到上一页 --> <router-link :to="{ name: 'HomeOne', query: { id: this.id } }" class="next" v-show="nextds" ><button @click="nextd">上一页</button></router-link > <!-- 跳转到下一页 --> <router-link :to="{ name: 'HomeOne', query: { id: this.id } }" class="next" v-show="nextss" ><button @click="nexts">下一页</button></router-link > </div> </div> </template> <script> export default { data() { return { list: [], id: localStorage.getItem("id") || [1], nextds: false, nextss: true, }; }, created() { localStorage.setItem("id", this.id); // 进入时直接调用 axios 接口 this.request(); // 进入时直接调用 上下页按钮是否显示 this.click(); }, methods: { nexts() { // 页数加一 this.id++; // 存储至本地 localStorage.setItem("id", this.id); // 调用 axios 请求 this.request(); // 调用上下页按钮是否显示 this.click(); // 回到顶部 document.documentElement.scrollTop = 0; }, // 上一页 nextd() { // 页数减一 this.id--; // 存储至本地 localStorage.setItem("id", this.id); // 调用 axios 请求 this.request(); // 调用上下页按钮是否显示 this.click(); // 回到顶部 document.documentElement.scrollTop = 0; }, // 点击上下页按钮是否显示 click() { // 判断上一页点击按钮是否显示 this.id >= 2 ? (this.nextds = true) : (this.nextds = false); // 判断下一页点击按钮是否显示 this.id >= 3 ? (this.nextss = false) : (this.nextss = true); }, request() { // axios 请求 页面1，每个页面5个 this.$axios .get(`/api/articles?page=${localStorage.getItem("id")}&limit=5`) .then(({ data }) => { console.log(data.results); // 请求的值赋值给list this.list = data.results; }); }, // 点击进入详情 next(id) { // console.log(id); this.$router.push({ name: "Details", query: { id: id }, }); }, }, }; </script> <style lang="scss" scoped> .box { width: 100%; height: 100%; .HomeTitle { width: 100%; // height: 2rem; margin: 0.6rem 0; // background-color: pink; text-align: center; overflow: hidden; h1 { font-size: 0.41rem; margin: 0 0 0.1rem; } p { font-size: 0.14rem; color: #818181; text-transform: uppercase; letter-spacing: 0.02rem; } } .HomeList { li { padding: 0.15rem; text-align: center; border-bottom: 1px solid #f2f2f2; .web { font-size: 0.1rem; color: #c39f76; text-transform: uppercase; letter-spacing: 0.02rem; } .title { font-size: 0.2rem; margin: 0.13rem 0; } .author { color: #939393; } .separator { margin: 0.12rem 0; font-size: 0.1rem; color: #939393; } .content { margin: 0.12rem 0 0.13rem; text-align: left; color: rgba(0, 0, 0, 0.7); display: -webkit-box; //对象作为弹性伸缩盒子模型显示 overflow: hidden; //溢出隐藏 -webkit-box-orient: vertical; //设置伸缩盒子对象的子元素的排列方式 -webkit-line-clamp: 3; //设置 块元素包含的文本行数 } } } .bottom { margin: 0.15rem; position: relative; .next:first-child { position: absolute; left: 0; } .next:last-child { position: absolute; right: 0; } } } </style>
列表页分页效果
看 axios 的页数显示显示几页 按页数判断上下页按钮是否显示 并把页数保存至本地
详情页代码：
<template> <div class="box"> <!-- 文章标签 数组转换为字符串 --> <p class="web">{{ list.tags.toString() }}</p> <!-- 标题 --> <h1 class="title">{{ list.title }}</h1> <!-- 图片和作者 --> <span class="author"> <!-- <img :src="list.avatar" alt="" /> --> {{ list.author }} </span> <!-- 使用dayjs转换时间格式 --> <p class="separator"> {{ dayjs(list.date).format("YYYY-MM-DD") }} / <!-- 用正则方法获取浏览次数 --> {{ list.separator.match(/\d+/g).toString() }} 次浏览 </p> <!-- 内容，里面有其他标签使用v-html输出 --> <p v-html="list.content" class="content"></p> </div> </template> <script> export default { data() { return { list: [], }; }, created() { // 进入时直接调用 this.request(); }, methods: { request() { // axios 请求 点击列表的详情 this.$axios .post(`/api/articles/${this.$route.query.id}`) .then(({ data }) => { console.log(data); // 请求到的值赋值给list this.list = data; }); }, }, }; </script> <style lang="scss" scoped> .box { text-align: center; .content { text-align: left; padding: 0.44rem 0.15rem 0; overflow: hidden; img { display: inline-block; width: 3.75rem; } } .web { font-size: 0.1rem; color: #c39f76; text-transform: uppercase; letter-spacing: 0.02rem; } .title { font-size: 0.2rem; margin: 0.13rem 0; } .author { color: #939393; } .separator { margin: 0.12rem 0; font-size: 0.1rem; color: #939393; } } </style>
以上就是AlloyTeam（腾讯全端博客）的代码，不懂得也可以在评论区里问我，以后会持续添加一些新的功能，敬请关注。
