mini-ui框架Indicator，Infinite scroll，Toast，MessageBox，Index List@詩
例子1：做好mini-ui必備的導入，配置等等，之后實現(xiàn)mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用
mini-ui的網(wǎng)址：http://mint-ui.github.io/#!/zh-cn
npm?install?mint-ui?--save
main.js（下面都要用這個文件中的mini-ui的配置）
mint-ui組件庫使用前必備
Nowplaying.vue
使用mini-ui的方法就是復制粘貼，運用如下的說明的代碼等等
當然，別的界面你也可以用上indicator指示器
例子2：實現(xiàn)Infinite?scroll無限滾動指令（Infinite?scroll就是當即將滾動至列表底部時, 自動加載更多數(shù)據(jù)。個人對Infinite?scroll的理解：就是通過滾動來實現(xiàn)“分頁查詢”的效果，也就是一開始是第1頁的10條數(shù)據(jù)，向下滾動后，同時加載下一頁的數(shù)據(jù)，有時會同時出現(xiàn)分別存在于2頁的數(shù)據(jù)）
main.js（見前面的例子，一樣的代碼）
Nowplaying.vue
例子3：使用Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢
Nowplaying.vue
用Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）要注意先后的位置
例子4：用MessageBox消息框部分，實現(xiàn)點擊?正在即將上映界面?中的沒有排期的電影時，出現(xiàn)消息框，提示"沒有排期，看看其他的電影吧"，可以選擇確定后跳轉(zhuǎn)到? 正在熱映界面? ?，點取消選項就只關(guān)閉消息框。
Comingsoon.vue
例子5：用Index List實現(xiàn)字母索引城市下拉框
String.fromCharCode(i)就是A-Z的26個大寫英文字母
字符A的十進制ASCII碼值是65
用localStorage來保存cityId等等
報錯解決 Duplicate keys detected: '1'. This may cause an update error.
Nowplaying.vue
Cinema.vue
City.vue
store.js
當然，后面我會進行一些bug修復，“超鏈接”（路由配置）修改，功能增加等等
例子6：下載并且使用vue項目中UUID1生成唯一標識id
npm install uuidv1
知識集錦
mintui框架
npm install mint-ui --save
main.js中引入mintui
Film.vue進度條Indicator
Nowplaying.vue無限滾動指令"
Comingsoon.vueMessageBox
City.vue城市選擇框Index List
elementui:pc端
mintui:移動端
單詞
Indicator
Infinite?
scroll
Toast
例子1：做好mini-ui必備的導入，配置等等，之后實現(xiàn)mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用
mini-ui的網(wǎng)址：http://mint-ui.github.io/#!/zh-cn
http://mint-ui.github.io/docs/#/
npm?install?mint-ui?--save
node_modules目錄下后會自動出現(xiàn)mini-ui文件夾：
使用mini-ui時必備的配置
main.js（下面都要用這個文件中的mini-ui的配置）
//mint-ui組件庫使用前必備?START
//?引入mint-ui組件庫：
import?MintUI?from?'mint-ui'
import?'mint-ui/lib/style.css'
//?使用mint-ui組件庫：
Vue.use(MintUI)
//mint-ui組件庫使用前必備?END
Nowplaying.vue
//mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?START
import?{?Indicator?}?from?'mint-ui';
//mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?END
????//?mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?START
????Indicator.open('加載中...')
????//?mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?END
?//?mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?START
??????Indicator.close();
??????//?mini-ui的Indicator指示器（正在加載數(shù)據(jù)時的轉(zhuǎn)圈的動畫）的使用?END
使用mini-ui的方法就是復制粘貼，運用如下的說明的代碼等等
當然，別的界面你也可以用上indicator指示器
例子2：實現(xiàn)Infinite scroll無限滾動指令（Infinite?scroll就是當即將滾動至列表底部時, 自動加載更多數(shù)據(jù)。個人對Infinite?scroll的理解：就是通過滾動來實現(xiàn)“分頁查詢”的效果，也就是一開始是第1頁的10條數(shù)據(jù)，向下滾動后，同時加載下一頁的數(shù)據(jù)，有時會同時出現(xiàn)分別存在于2頁的數(shù)據(jù)）
main.js（見前面的例子，一樣的代碼）
Nowplaying.vue
?<!--?實現(xiàn)Infinite?scroll無限滾動指令的部分?START?-->
????<ul??v-infinite-scroll="loadMore"
????????infinite-scroll-disabled="loading"
????????infinite-scroll-distance="40"
????????infinite-scroll-immediate-check="false">
????<!--?實現(xiàn)Infinite?scroll無限滾動指令的部分?END?-->
//?實現(xiàn)Infinite?scroll無限滾動指令的部分?START
???????loading:?false,
??????pageNum:?1,
??????total:?0
??????//?實現(xiàn)Infinite?scroll無限滾動指令的部分?END
//?實現(xiàn)Infinite?scroll無限滾動指令的部分?START
???????this.total?=?res.data.data.total
??????//??實現(xiàn)Infinite?scroll無限滾動指令的部分?END
例子3：使用Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢
Nowplaying.vue
//Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢?START
import?{??Toast?}?from?'mint-ui'
//Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢?END
??//Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢?START
????????
????????Toast('已經(jīng)加載完啦')
????????//Toast消息提示框的提示無限滾動加載的數(shù)據(jù)已經(jīng)全部加載完畢?END
???????
例子4：用MessageBox消息框部分，實現(xiàn)點擊 正在即將上映界面 中的沒有排期的電影時，出現(xiàn)消息框，提示"沒有排期，看看其他的電影吧"，可以選擇確定后跳轉(zhuǎn)到? 正在熱映界面? ?，點取消選項就只關(guān)閉消息框。
Comingsoon.vue
//MessageBox消息框部分?START
import?{?MessageBox?}?from?"mint-ui";
//MessageBox消息框部分?END
????????//MessageBox消息框部分?START
????????MessageBox({
??????????title:?"提示",
??????????message:?"沒有排期，看看其他的電影吧",
??????????showCancelButton:?true,
????????}).then((res)?=>?{
??????????if?(res?===?"confirm")?{
????????????this.$router.push(`/film/nowplaying`);
??????????}
????????});
????????//MessageBox消息框部分?END
例子5：用Index List實現(xiàn)字母索引城市下拉框
配置路由，默認先跳轉(zhuǎn)到 字母索引城市下拉框 界面組件
?let?o?=?{}
??????for?(let?i?=?65;?i?<?92;?i++)?{
??????????//String.fromCharCode(i)就是A-Z的26個大寫英文字母
????????o[String.fromCharCode(i)]?=?[]
??????}
字符A的十進制ASCII碼值是65
用localStorage來保存cityId等等
先在City.vue把選中的cid城市編號存儲在localStorage.setItem('cityId',?cid)中，后面store.js中的專門用來設(shè)置全局變量的state中聲明cityId:?localStorage.getItem('cityId')，讓cityId可以在
報錯解決 Duplicate keys detected: '1'. This may cause an update error.
Nowplaying.vue
?//字母索引城市下拉框部分?START
??????url:?`/mz/gateway?cityId=${this.$store.state.cityId}&pageNum=1&pageSize=10&type=1&k=4271989`,
??????//字母索引城市下拉框部分?END
??//字母索引城市下拉框部分?START
????????//這里${this.$store.state.cityId}要統(tǒng)一寫上，不可以單獨寫成430100等等，不然可能會報key方面的錯（我遇到過）：
????????url:?`/mz/gateway?cityId=${this.$store.state.cityId}&pageNum=${this.pageNum}&pageSize=10&type=1&k=4271989`,
????????//字母索引城市下拉框部分?END
Cinema.vue
?//字母索引城市下拉框部分?START
???????url:?`/mz/gateway?cityId=${localStorage.getItem('cityId')}&ticketFlag=1&k=5440610`,
???????/*localStorage.getItem('cityId')才可以獲取當前的cityId，
???????this.$store.state.cityId的話會不準確，必須重新刷新界面后才準確*/
???????//字母索引城市下拉框部分?END
City.vue
<template>
??<mt-index-list>
????<mt-index-section?v-for="group?in?dicCitys"
????????:index="group.ch"?:key="group.ch">
????????<div?v-for="city?in?group.list"?@click="saveCity(city.cityId)"
??????????:key="city.name">
??????????<mt-cell?:title="city.name">
??????????</mt-cell>
????????</div>
????</mt-index-section>
??</mt-index-list>
</template>
<script>
import?axios?from?'axios'
export?default?{
??data?()?{
????return?{
??????dataList:?[]
????}
??},
??mounted?()?{
????axios({
??????url:?'/mz/gateway?k=9502566',
??????headers:?{
????????'X-Client-Info':?'{"a":"3000","ch":"1002","v":"5.0.4","e":"15610855429195524981146"}',
????????'X-Host':?'mall.film-ticket.city.list'
??????}
????}).then(res?=>?{
??????//?[{"cityId":110100,"name":"北京","pinyin":"beijing","isHot":1}]
??????//?console.log(JSON.stringify(res.data.data.cities))
??????this.dataList?=?res.data.data.cities
????})
??},
??computed:?{
????dicCitys?()?{
??????let?o?=?{}
??????for?(let?i?=?65;?i?<?92;?i++)?{
??????????//String.fromCharCode(i)就是A-Z的26個大寫英文字母
????????o[String.fromCharCode(i)]?=?[]
??????}
??????this.dataList.reduce(function?(obj,?city)?{
????????//?獲取城市拼音的首字母,并轉(zhuǎn)換成大寫字母
????????let?c?=?city.pinyin.charAt(0).toUpperCase()
????????obj[c].push(city)
????????return?o
??????},?o)
??????let?ny?=?[]
??????for?(let?attr?in?o)?{
????????if?(o[attr].length?>?0)?{
??????????let?group?=?{
????????????'ch':?attr,
????????????'list':?o[attr]
??????????}
??????????ny.push(group)
????????}
??????}
??????//???return?[{'ch':?'A',?list:?[{name:?'安徽',?pinyin:?'anhui'}]},
??????//?????{'ch':?'B',?list:?[{name:?'北京',?pinyin:?'beijing'}]},
??????//?????{'ch':?'C',?list:?[{name:?'長沙',?pinyin:?'changsha'}]}]
??????return?ny
????}
??},
??methods:?{
????saveCity?(cid)?{
???????console.log('保存城市Id'?+?cid)
??????//?將選中的城市的id保存在本地
??????localStorage.setItem('cityId',?cid)
??????this.$router.push(`/cinema`)
????}
??}
}
</script>
<style>
</style>
store.js
??//城市字母索引“下拉框”等部分?START
???,?cityId:?localStorage.getItem('cityId')//城市id
????//城市字母索引“下拉框”等部分?END
??//城市字母索引“下拉框”等部分?START
????????url:?`/mz/gateway?cityId=${store.state.cityId}&pageNum=1&pageSize=10&type=2&k=8700885`,
?????????//城市字母索引“下拉框”等部分?END
當然，后面我會進行一些bug修復，“超鏈接”（路由配置）修改，功能增加等等
例子6：下載并且使用vue項目中UUID1生成唯一標識id
npm install uuidv1
//使用vue項目中UUID1生成唯一標識id（暫時不用）?START
import?uuidv1?from?"uuid/v1";
??//使用vue項目中UUID1生成唯一標識id（暫時不用）?END
//使用vue項目中UUID1生成唯一標識id（暫時不用）?START
??????id:?uuidv1(),?//調(diào)用時就像?pageNum等變量那樣用就可以
??????//使用vue項目中UUID1生成唯一標識id（暫時不用）?END
知識集錦
第一階段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被設(shè)置為true,那么在編譯時會報eslint錯誤
修改package.json文件中的""lint""為 ""eslint --fix --ext .js,.vue src"",
運行npm run lint，會自動修復所有的eslint錯誤
那么再執(zhí)行npm run dev時就不會報錯了"
"2、npm run build打包命令：
會自動生成dist文件，將dist文件夾中的內(nèi)容部署到后臺程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable屬性
pathRewrite的作用"
4、創(chuàng)建導航欄
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文件中導入圖片文件
import './assets/iconfont/iconfont.css'
"
"3、搭建圖片服務器（后臺代碼部分，將圖片放在后臺代碼的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、電影頁面導航欄（正在熱映和即將上映）
6、顯示正在熱映請求數(shù)據(jù)（特殊處理設(shè)置請求頭獲取數(shù)據(jù)和反向代理）
7、過濾處理數(shù)據(jù)Vue.filter
8、電影頁面導航欄固定定位效果
9、電影詳情頁面
10、影院頁面數(shù)據(jù)加載
"11、better-scroll模塊:平滑的拖動
npm install better-scroll --save"
"12、事件總線（適合小項目）：組件通訊
實現(xiàn)進入詳情頁面隱藏下方導航欄，離開詳情頁面，顯示下方導航欄的功能"
"13、狀態(tài)管理vuex（適合大項目）
npm install vuex --save
再次實現(xiàn)進入詳情頁面隱藏下方導航欄，離開詳情頁面，顯示下方導航欄的功能"
"14、調(diào)試工具devtool
創(chuàng)建文件夾VUEDEVTOOLS，在改文件夾下運行npm install vue-devtools
將VUEDEVTOOLS\node_modules\vue-devtools\vender\manifest.json文件中的
persistent屬性修改為true
打開google瀏覽器，更多工具-擴展程序-打開開發(fā)者模式-點擊加載已解壓的擴展程序-
選擇VUEDEVTOOLS\node_modules\vue-devtools\vender
重啟后點擊瀏覽器右上角擴展程序圖標"
15、vuex實現(xiàn)數(shù)據(jù)緩存：緩存即將上映數(shù)據(jù)
16、export規(guī)則
17、簡化獲取vuex屬性的代碼：mapState簡化$store.state.isShowBar
18、TOP3電影處理：vuex的getters實現(xiàn)（略）
19、mutation和action名稱常量化（略）
"20、mintui框架
npm install mint-ui --save
main.js中引入mintui
Film.vue進度條Indicator
Nowplaying.vue無限滾動指令"
Comingsoon.vueMessageBox
City.vue城市選擇框Index List
elementui:pc端
mintui:移動端
單詞
Indicator
Infinite?
scroll
Toast
toast是Android系統(tǒng)中一種消息提示框類型，是一個View?視圖，快速的為用戶顯示少量的信息。Toast?在應用程序上浮動顯示信息給用戶，它永遠不會獲得焦點，不影響用戶的輸入等操作，主要用于?一些幫助?/?提示。Toast?最常見的創(chuàng)建方式是使用靜態(tài)方法?Toast.makeText。
