基于Vue2.0制作的知乎日报所遇到的问题及解决方案

项目介绍文章地址

zhihu-daily

项目演示

展示.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设置为false
```
  data(){
      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>