vue：過濾器，詳情界面，better-scroll有慣性地滑動，props傳值，swiper【詩書畫唱】
目錄：
例子1：通過獲取的電影的id值來動態(tài)實現(xiàn)對應(yīng)電影id的電影詳情界面，要求使用props（父子組件之間傳值，父傳子通過props屬性來傳遞參數(shù)，子傳父通過emit來傳遞參數(shù)）讓演員圖片，劇照等的swiper靜態(tài)輪播效果（可以自己滑動一排的圖片的效果）。同時實現(xiàn)影院界面組件的部分，要求使用better-scroll模塊來實現(xiàn)更好的平滑的拖動，手機上有慣性地滑動等等。
（部分代碼見前面的專欄。）
Detail.vue
Film.vue
Cinema.vue
{ {now | km} }之類的過濾器寫法
{ {now | 'yyyy-MM-dd'} } 這種表達式里面，豎線和后面的參數(shù)通過什么方式可以自定義？
better-scroll模塊:平滑的拖動
npm install better-scroll --save
能夠讓手機滑動APP時，有慣性的模塊better-scroll
個人對這里的overflow:hidden的理解：這個CSS樣式的設(shè)置可以讓子元素超出父元素的部分被隱藏
padding-left的數(shù)值要自己調(diào)到適應(yīng)幾乎所有型號的手機，防止浮層塌陷等等
??padding-left:?7px;（這里為10px等等的話會在某個手機型號中出現(xiàn)浮層塌陷，之前沒注意到是padding-left數(shù)值的原因）
例子1：通過獲取的電影的id值來動態(tài)實現(xiàn)對應(yīng)電影id的電影詳情界面，要求使用props（父子組件之間傳值，父傳子通過props屬性來傳遞參數(shù)，子傳父通過emit來傳遞參數(shù)）讓演員圖片，劇照等的swiper靜態(tài)輪播效果（可以自己滑動一排的圖片的效果）。同時實現(xiàn)影院界面組件的部分，要求使用better-scroll模塊來實現(xiàn)更好的平滑的拖動，手機上有慣性地滑動等等。
{ {now | km} }之類的過濾器寫法
{ {now | 'yyyy-MM-dd'} } 這種表達式里面，豎線和后面的參數(shù)通過什么方式可以自定義？
在Film.vue這個組件中使用了
window.onscroll?=?this.hanleScroll之類的代碼后（
?hanleScroll?()是寫了綁定的事件的方法）
給window綁定滾動事件，如果跳轉(zhuǎn)出Film.vue這個組件所在的頁面（也就是切換到別的組件時），那么因為Vue是單頁面開發(fā)，所以?hanleScroll?()中的
??let?oh?=?this.$refs.myswiper.$el.offsetHeight等代碼會導(dǎo)致報錯。解決方法就是，跳轉(zhuǎn)的時候，取消window.onscroll?=?this.hanleScroll，取消綁定
??? at VueComponent.hanleScroll (Film.vue?b39f:43)
??/*&解決切換組件時報Cannot?read?property?'$el'?of?undefined
????at?VueComponent.hanleScroll等的報錯問題?START*/
??beforeDestroy?()?{
????//?取消滾動事件
????window.onscroll?=?null
??},
??/*&解決切換組件時報Cannot?read?property?'$el'?of?undefined
????at?VueComponent.hanleScroll等的報錯問題?END*/
第一階段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被設(shè)置為true,那么在編譯時會報eslint錯誤
修改package.json文件中的""lint""為 ""eslint --fix --ext .js,.vue src"",
運行npm run lint，會自動修復(fù)所有的eslint錯誤
那么再執(zhí)行npm run dev時就不會報錯了"
"2、npm run build打包命令：
會自動生成dist文件，將dist文件夾中的內(nèi)容部署到后臺程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導(dǎo)航欄
5、配置歡迎頁面
6、高亮顯示
7、二級路由配置
8、路由傳參和name屬性傳參
9、去掉路徑的#
10、路由守衛(wèi):全局路由守衛(wèi)和局部路由守衛(wèi)
第二階段
"1、添加sass支持：--verbose顯示安裝的詳細信息
npm install sass-loader@7.3.1 --save-dev
npm install node-sass@4.14.1 --save-dev
在build文件夾下的webpack.base.conf.js的rules里面添加配置：
{
? ? ? ? test: /\.scss$/,
? ? ? ? loaders: ['style', 'css', 'sass']
? ? ? }"
"2、選項卡沉底：App.vue中添加全局樣式，Tabbar.vue中添加局部樣式，
iconfont方式添加圖片：
將所有圖片文件放在assets/iconfont文件夾下
在main.js文件中導(dǎo)入圖片文件
import './assets/iconfont/iconfont.css'
"
"3、搭建圖片服務(wù)器（后臺代碼部分，將圖片放在后臺代碼的public文件夾下）
圖片路徑：
https://static.maizuo.com/v5/upload/683067671e17cce7b5647693d5733ea3.jpg
配置反向代理解決跨域問題"
"4、輪播效果：
不要下載最新版本的swiper，否則分頁欄和自動播放無效
npm install swiper@5.4.5 --save"
"注意：如果反向代理不可用了，可嘗試清除一下瀏覽器的緩存歷史記錄
插槽slot用法：1、匿名插槽2具名插槽
異步加載數(shù)據(jù)后，放置輪播器中的圖片無法拖動：
添加observer:true配置"
5、電影頁面導(dǎo)航欄（正在熱映和即將上映）
6、顯示正在熱映請求數(shù)據(jù)（特殊處理設(shè)置請求頭獲取數(shù)據(jù)和反向代理）
7、過濾處理數(shù)據(jù)Vue.filter
8、電影頁面導(dǎo)航欄固定定位效果
9、電影詳情頁面
10、影院頁面數(shù)據(jù)加載
"11、better-scroll模塊:平滑的拖動
npm install better-scroll --save"
"12、事件總線（適合小項目）：組件通訊
實現(xiàn)進入詳情頁面隱藏下方導(dǎo)航欄，離開詳情頁面，顯示下方導(dǎo)航欄的功能"
"13、狀態(tài)管理vuex（適合大項目）
npm install vuex --save"
props個人認為有時真的挺好用的，有時比較方便
能夠讓手機滑動APP時，有慣性的模塊better-scroll
npm install better-scroll --save
?this.dataList?=?res.data.data.cinemas
??????//?添加betterscroll
??????this.$nextTick(()?=>?{
????????/*?eslint-disable?no-new?*/
????????new?BetterScroll('.cinema',?{
??????????pullUpLoad:?true,
??????????scrollbar:?true,
??????????pullDownRefresh:?true
????????})
??????})
個人對這里的overflow:hidden的理解：這個CSS樣式的設(shè)置可以讓子元素超出父元素的部分被隱藏
padding-left的數(shù)值要自己調(diào)到適應(yīng)幾乎所有型號的手機，防止浮層塌陷等等
??padding-left:?7px;（這里為10px等等的話會在某個手機型號中出現(xiàn)浮層塌陷，之前沒注意到是padding-left數(shù)值的原因）
（部分代碼見前面的專欄。）
Detail.vue
<template>
??<!--?<h1>顯示電影詳情{{$route.params.n1}}</h1>?-->
??<div?v-if="filminfo"?>
??<!--?<div?id="divId1">?-->
????<img?:src="filminfo.poster"?class="poster"?/>
?<!--?</div>?-->
<!--?<div?id="divId2">?-->
????<h2>{{filminfo.name}}?{{filminfo.grade}}</h2>
????<h3>演職人員</h3>
????<swiper?class="actorsSwiper"?swipername="actorsSwiper"?pageSize="4">
??????<div?class="swiper-slide"?v-for="actor?in?filminfo.actors"
????????:key="actor.name">
????????<img?:src="actor.avatarAddress"?/>
????????<p>{{actor.name}}</p>
??????</div>
????</swiper>
????<h3>劇照</h3>
????<swiper?class="photosSwiper"?swipername="photosSwiper"?pageSize="3">
??????<div?class="swiper-slide"?v-for="(data,index)?in?filminfo.photos"
????????:key="index">
????????<img?:src="data"?/>
??????</div>
????</swiper>
??</div>
<!--?
??</div>?-->
</template>
<script>
import?axios?from?'axios'
import?swiper?from?'@/views/Detail/DetailSwiper'
export?default?{
??data?()?{
????return?{
??????filminfo:?null
????}
??},
??components:?{
????swiper
??},
??mounted?()?{
????//這里獲取的n1參數(shù)的內(nèi)容就是電影的id
?????const?id?=this.$route.params.n1
????//?console.log(this.$route.params.n1)
??????axios({
??????url:?`/mz/gateway?filmId=${id}&k=4359832`,
??????headers:?{
????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????'X-Host':?'mall.film-ticket.film.info'
??????}
????}).then(res?=>?{
??????this.filminfo?=?res.data.data.film
??????//?console.log(JSON.stringify(this.filminfo))
????})
??}}
//自己加的代碼?START
//自己加的代碼?END
</script>
<style?lang="scss"?scoped>
//poster就是電影海報的圖片：
??.poster?{
//??height:400px;
????width:?100%;
//??position:absolute;
//?clip:rect(20px,550px,5200px,0px);
??overflow:?hidden;
??}
//?#divId1{
//?????position:?absolute;
//?????//?clip:rect(20px,100%,100%,0px);
//??top:-50%;
//?//???//??height:?50px;
//????width:?100%;
//?//???//??border:?1px?solid?red;
//?//??}
//?#divId2{
//?????position:?absolute;
//???top:50%;
//?//???//??height:?50px;
//????width:?100%;
//?//???//??border:?1px?solid?red;
//??}
//?#divAll{
//?????position:?absolute;
//???top:-50%;
//?//???//??height:?50px;
//????width:?100%;
//?//???//??border:?1px?solid?red;
//??}
</style>
Film.vue
<template>
??<div>
????<film-swiper?:key="loopList.length"?ref="myswiper">
??????<div?class="swiper-slide"?v-for="data?in?loopList"
??????????:key="data">
????????<img?:src="data"/>
??????</div>
????</film-swiper>
????<film-header?:class="isFixed???'fixed'?:?''"?></film-header>
????<router-view?/>
??</div>
</template>
<script>
import?filmSwiper?from?'@/views/Film/FilmSwiper'
import?filmHeader?from?'@/views/Film/FilmHeader'
import?axios?from?'axios'
export?default?{
??data?()?{
????return?{
??????loopList:?[],
??????isFixed:?false
????}
??},
??components:?{
????filmSwiper,
????filmHeader
??},
??mounted?()?{
????/*http://127.0.0.1:9001/logos
????獲取的是["http://127.0.0.1:9001/public/a0.png",
????"http://127.0.0.1:9001/public/a1.png",
????"http://127.0.0.1:9001/public/a2.png","http://127.0.0.1:9001/public/a3.png"]
????輪播圖的圖片等等。/axs就是http://127.0.0.1:9001*/
????axios.get('/axs/logos')
??????.then(res?=>?{
????????this.loopList?=?res.data
??????})
????//?給window綁定滾動事件
????window.onscroll?=?this.hanleScroll
??}
??,
??/*&解決切換組件時報Cannot?read?property?'$el'?of?undefined
????at?VueComponent.hanleScroll等的報錯問題?START*/
??beforeDestroy?()?{
????//?取消滾動事件
????window.onscroll?=?null
??},
??/*&解決切換組件時報Cannot?read?property?'$el'?of?undefined
????at?VueComponent.hanleScroll等的報錯問題?END*/
??methods:?{
????hanleScroll?()?{
??????//?獲取鼠標(biāo)滾動的距離
??????let?st?=?document.documentElement.scrollTop
??//??console.log('滾動的距離是：'?+?st)
??????//?獲取輪播組件的高度
??????let?oh?=?this.$refs.myswiper.$el.offsetHeight
??????//?console.log('輪播組件的高度是：'?+?oh)
??????if?(st?>=?oh)?{
????????this.isFixed?=?true
??????}?else?{
????????this.isFixed?=?false
??????}
????}
??}
}
</script>
<style>
</style>
Cinema.vue
<template>
??<!--?:style="btStyle"：?添加betterscroll?，讓APP滑動等等時有慣性，
?讓APP更好的滾動效果！?-->
??<div?class="cinema"?:style="btStyle">
????<ul>
??????<li?v-for="data?in?dataList"?:key="data.cinemaId">
????????{{?data.name?}}
????????<p?style="font-size:?12px">{{?data.address?}}</p>
??????</li>
????</ul>
??</div>
</template>
<script>
import?axios?from?"axios";
//?添加betterscroll?START
import?BetterScroll?from?"better-scroll";
//?添加betterscroll?END
export?default?{
??data()?{
????return?{
??????dataList:?[],
??????//?添加betterscroll?START
??????btStyle:?{
????????height:?"0px",
??????},
??????//?添加betterscroll?END
????};
??},
??mounted()?{
????//?添加betterscroll?START
????this.btStyle.height?=?document.documentElement.clientHeight?-?50?+?"px";
????//?添加betterscroll?END
????axios({
??????url:?`/mz/gateway?cityId=430100&ticketFlag=1&k=5440610`,
??????headers:?{
????????"X-Client-Info":
??????????'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????"X-Host":?"mall.film-ticket.cinema.list",
??????},
????}).then((res)?=>?{
??????this.dataList?=?res.data.data.cinemas;
??????//?添加betterscroll?START
??????this.$nextTick(()?=>?{
????????/*?eslint-disable?no-new?*/
????????new?BetterScroll(".cinema",?{
??????????pullUpLoad:?true,
??????????scrollbar:?true,
??????????pullDownRefresh:?true,
????????});
??????});
??????//?添加betterscroll?END
????});
??},
};
</script>
<style?lang="scss"?scoped>
li?{
??height:?50px;
}
.cinema?{
??position:?absolute;
??left:?0;
??top:?0;
??overflow:?hidden;
}
</style>
