項(xiàng)目介紹文章地址
項(xiàng)目演示
項(xiàng)目截圖
API接口跨域
因?yàn)樾枰{(diào)用知乎的API，所以在config文件夾中的index.js配置路由跨域
proxyTable: {
'/zhihu':{
target:'https://news-at.zhihu.com/api/', // 跨域接口（知乎API接口）
changeOrigin:true, // 是否跨域
pathRewrite:{
'^/zhihu':'' // 重寫接口
}
}
},
例如我要調(diào)用https://news-at.zhihu.com/api/4/news/latest的數(shù)據(jù)，則直接使用/zhihu/4/news/latest 就可以調(diào)用接口
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()里面配置參數(shù)
data(){ return { swiperOption:{ loop:true, speed:1000, autoplay:{ delay:1000, disableOnInteraction: false, }, observer:true, observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper pagination: { el: '.swiper-pagination', clickable:true } }, } },
這里存在一個(gè)bug:雖然設(shè)置了loop:true，但是里面的新聞圖并不能循環(huán)播放，解決方法:在最外層的swiper容器加一個(gè)判定條件，當(dāng)從API獲取的數(shù)據(jù)長(zhǎng)度>0時(shí)，則展示輪播圖。
<swiper :options="swiperOption" ref="mySwiper" v-if='topNews.length > 0'>
主頁(yè)側(cè)邊欄滑動(dòng)效果的實(shí)現(xiàn)
.sideBar {
position: absolute;
left: -60%;
top: 0;
width: 60%;
height: 100%;
background-color: #242a2f;
color: #95999c;
padding: 2rem 0;
transition:.5s ease-in;
滑動(dòng)效果class
.show_bar {
transform: translateX(100%);
}
加入滑動(dòng)的判定條件
<!-- 側(cè)邊欄 -->
<sideBar :class="{'show_bar':showSideBar}"></sideBar>
思路:將sideBar部分相對(duì)定位到屏幕之外，寬度為屏幕寬度的60%，當(dāng)showSideBar 為true時(shí) ，則添加show_bar 類。這里 translateX()滑動(dòng)的百分比是按照自身寬度來算。
加載動(dòng)畫的實(shí)現(xiàn)
-
動(dòng)畫實(shí)現(xiàn)
<!-- 加載動(dòng)畫 --> <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);
}
}
-
在數(shù)據(jù)加載之前，動(dòng)畫出現(xiàn)；數(shù)據(jù)加載獲取完畢之后，動(dòng)畫消失
首先在data()里面 將loading設(shè)置為falsedata(){ return { loading:false } }, -
加載數(shù)據(jù)時(shí)，顯示動(dòng)畫
// 獲取文章 initArticlePage(){ // 將article設(shè)置為空 this.$store.commit('SET_ARTICLE',''); // 如果article為空或undefined或0時(shí) if(this.article === '' || this.article.length === 0 || this.article === undefined) { // 顯示動(dòng)畫 this.loading = true; this.$store.dispatch('getArticle') .then(val => { // 數(shù)據(jù)加載成功后 設(shè)置loading為false，隱藏動(dòng)畫 this.loading = false; this.$store.commit('SET_ARTICLE',val); }, e => { // 如果數(shù)據(jù)獲取不成功則一直顯示動(dòng)畫 this.loading = true; }) } }
進(jìn)入不同文章時(shí)，始終緩存的是第一次看到的文章
首先APP.vue結(jié)構(gòu)
<template>
<div id="app">
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
一開始將用來初始化文章頁(yè)的函數(shù)initArticlePage()放在created()中執(zhí)行，放在返回主頁(yè)后再隨便點(diǎn)開任意一個(gè)文章，打開的仍是第一次觀看的文章，后來將initArticlePage()放在activated()執(zhí)行，bug消失。
created()：在實(shí)例創(chuàng)建完成后被立即調(diào)用。因?yàn)榈谝淮芜M(jìn)入article頁(yè)面時(shí)，則調(diào)用created()，則再次進(jìn)入時(shí)則不調(diào)用，所以可以簡(jiǎn)單認(rèn)為created()只執(zhí)行一次。
activated()：keep-alive 組件激活時(shí)調(diào)用?？梢院?jiǎn)單認(rèn)為，只要keep-alive被激活，則就調(diào)用activated()，則調(diào)用initArticlePage()函數(shù)。
側(cè)邊欄顯示后，可以左右滑動(dòng)
解決方法：
在遮罩層和側(cè)邊欄添加@touchmove.prevent
遮罩層
<!-- 遮罩層 -->
<div class="cover" v-show='showCover' @click='showHomePage()' @touchmove.prevent></div>
側(cè)邊欄
<aside class="sideBar" @touchmove.prevent>
