项目介绍文章地址
项目演示
展示.gif
项目截图
主页
侧边栏
文章详情页
评论页
API接口跨域
因为需要调用知乎的API，所以在config文件夹中的index.js配置路由跨域
proxyTable: {
'/zhihu':{
target:'https://news-at.zhihu.com/api/', // 跨域接口（知乎API接口）
changeOrigin:true, // 是否跨域
pathRewrite:{
'^/zhihu':'' // 重写接口
}
}
},
例如我要调用https://news-at.zhihu.com/api/4/news/latest的数据，则直接使用/zhihu/4/news/latest 就可以调用接口
vue里面使用swiper的方法
- 下载组件 vue-awesome-swiper
$ npm install vue-awesome-swiper --save-dev
-
vue 里面使用
<!-- 顶部轮播图新闻 --> <swiper :options="swiperOption" ref="mySwiper" v-if='topNews.length > 0'> <swiper-slide v-for='news in topNews' :key='news.id'> <p>{{news.title}}</p> <img :src="news.image" @click='goArticle(news.id)'> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> -
data()里面配置参数
data(){ return { swiperOption:{ loop:true, speed:1000, autoplay:{ delay:1000, disableOnInteraction: false, }, observer:true, observeParents:true,//修改swiper的父元素时，自动初始化swiper pagination: { el: '.swiper-pagination', clickable:true } }, } },
这里存在一个bug:虽然设置了loop:true，但是里面的新闻图并不能循环播放，解决方法:在最外层的swiper容器加一个判定条件，当从API获取的数据长度>0时，则展示轮播图。
<swiper :options="swiperOption" ref="mySwiper" v-if='topNews.length > 0'>
主页侧边栏滑动效果的实现
.sideBar {
position: absolute;
left: -60%;
top: 0;
width: 60%;
height: 100%;
background-color: #242a2f;
color: #95999c;
padding: 2rem 0;
transition:.5s ease-in;
滑动效果class
.show_bar {
transform: translateX(100%);
}
加入滑动的判定条件
<!-- 侧边栏 -->
<sideBar :class="{'show_bar':showSideBar}"></sideBar>
思路:将sideBar部分相对定位到屏幕之外，宽度为屏幕宽度的60%，当showSideBar 为true时 ，则添加show_bar 类。这里 translateX()滑动的百分比是按照自身宽度来算。
加载动画的实现
-
动画实现
<!-- 加载动画 --> <div class="loading-circle" v-show='loading'></div>
类的编写
.loading-circle {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%);
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 3rem;
height: 3rem;
animation:spin 2s linear infinite;
-webkit-animation: spin 2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
-
在数据加载之前，动画出现；数据加载获取完毕之后，动画消失
首先在data()里面 将loading设置为falsedata(){ return { loading:false } }, -
加载数据时，显示动画
// 获取文章 initArticlePage(){ // 将article设置为空 this.$store.commit('SET_ARTICLE',''); // 如果article为空或undefined或0时 if(this.article === '' || this.article.length === 0 || this.article === undefined) { // 显示动画 this.loading = true; this.$store.dispatch('getArticle') .then(val => { // 数据加载成功后 设置loading为false，隐藏动画 this.loading = false; this.$store.commit('SET_ARTICLE',val); }, e => { // 如果数据获取不成功则一直显示动画 this.loading = true; }) } }
进入不同文章时，始终缓存的是第一次看到的文章
首先APP.vue结构
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
一开始将用来初始化文章页的函数initArticlePage()放在created()中执行，放在返回主页后再随便点开任意一个文章，打开的仍是第一次观看的文章，后来将initArticlePage()放在activated()执行，bug消失。
created()：在实例创建完成后被立即调用。因为第一次进入article页面时，则调用created()，则再次进入时则不调用，所以可以简单认为created()只执行一次。
activated()：keep-alive 组件激活时调用。可以简单认为，只要keep-alive被激活，则就调用activated()，则调用initArticlePage()函数。
参考: 选项 / 生命周期钩子
侧边栏显示后，可以左右滑动
解决方法：
在遮罩层和侧边栏添加@touchmove.prevent
遮罩层
<!-- 遮罩层 -->
<div class="cover" v-show='showCover' @click='showHomePage()' @touchmove.prevent></div>
侧边栏
<aside class="sideBar" @touchmove.prevent>
网友评论