mini-ui框架Indicator，Infinite scroll，Toast，MessageBox，Index List@诗
例子1：做好mini-ui必备的导入，配置等等，之后实现mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用
mini-ui的网址：http://mint-ui.github.io/#!/zh-cn
npm install mint-ui --save
main.js（下面都要用这个文件中的mini-ui的配置）
mint-ui组件库使用前必备
Nowplaying.vue
使用mini-ui的方法就是复制粘贴，运用如下的说明的代码等等
当然，别的界面你也可以用上indicator指示器
例子2：实现Infinite scroll无限滚动指令（Infinite scroll就是当即将滚动至列表底部时, 自动加载更多数据。个人对Infinite scroll的理解：就是通过滚动来实现“分页查询”的效果，也就是一开始是第1页的10条数据，向下滚动后，同时加载下一页的数据，有时会同时出现分别存在于2页的数据）
main.js（见前面的例子，一样的代码）
Nowplaying.vue
例子3：使用Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕
Nowplaying.vue
用Indicator指示器（正在加载数据时的转圈的动画）要注意先后的位置
例子4：用MessageBox消息框部分，实现点击 正在即将上映界面 中的没有排期的电影时，出现消息框，提示"没有排期，看看其他的电影吧"，可以选择确定后跳转到 正在热映界面 ，点取消选项就只关闭消息框。
Comingsoon.vue
例子5：用Index List实现字母索引城市下拉框
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必备的导入，配置等等，之后实现mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用
mini-ui的网址：http://mint-ui.github.io/#!/zh-cn
http://mint-ui.github.io/docs/#/
npm install mint-ui --save
node_modules目录下后会自动出现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指示器（正在加载数据时的转圈的动画）的使用 START
import { Indicator } from 'mint-ui';
//mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用 END
// mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用 START
Indicator.open('加载中...')
// mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用 END
// mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用 START
Indicator.close();
// mini-ui的Indicator指示器（正在加载数据时的转圈的动画）的使用 END
使用mini-ui的方法就是复制粘贴，运用如下的说明的代码等等
当然，别的界面你也可以用上indicator指示器
例子2：实现Infinite scroll无限滚动指令（Infinite scroll就是当即将滚动至列表底部时, 自动加载更多数据。个人对Infinite scroll的理解：就是通过滚动来实现“分页查询”的效果，也就是一开始是第1页的10条数据，向下滚动后，同时加载下一页的数据，有时会同时出现分别存在于2页的数据）
main.js（见前面的例子，一样的代码）
Nowplaying.vue
<!-- 实现Infinite scroll无限滚动指令的部分 START -->
<ul v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="40"
infinite-scroll-immediate-check="false">
<!-- 实现Infinite scroll无限滚动指令的部分 END -->
// 实现Infinite scroll无限滚动指令的部分 START
loading: false,
pageNum: 1,
total: 0
// 实现Infinite scroll无限滚动指令的部分 END
// 实现Infinite scroll无限滚动指令的部分 START
this.total = res.data.data.total
// 实现Infinite scroll无限滚动指令的部分 END
例子3：使用Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕
Nowplaying.vue
//Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕 START
import { Toast } from 'mint-ui'
//Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕 END
//Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕 START
Toast('已经加载完啦')
//Toast消息提示框的提示无限滚动加载的数据已经全部加载完毕 END
例子4：用MessageBox消息框部分，实现点击 正在即将上映界面 中的没有排期的电影时，出现消息框，提示"没有排期，看看其他的电影吧"，可以选择确定后跳转到 正在热映界面 ，点取消选项就只关闭消息框。
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实现字母索引城市下拉框
配置路由，默认先跳转到 字母索引城市下拉框 界面组件
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中的专门用来设置全局变量的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}要统一写上，不可以单独写成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) {
// 获取城市拼音的首字母,并转换成大写字母
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(), //调用时就像 pageNum等变量那样用就可以
//使用vue项目中UUID1生成唯一标识id（暂时不用） END
知识集锦
第一阶段
"1、npm run lint命令:
如果config/index.js文件中的useEslint被设置为true,那么在编译时会报eslint错误
修改package.json文件中的""lint""为 ""eslint --fix --ext .js,.vue src"",
运行npm run lint，会自动修复所有的eslint错误
那么再执行npm run dev时就不会报错了"
"2、npm run build打包命令：
会自动生成dist文件，将dist文件夹中的内容部署到后台程序中"
"3、配置反向代理
修改config/index.js文件中的proxyTable属性
pathRewrite的作用"
4、创建导航栏
5、配置欢迎页面
6、高亮显示
7、二级路由配置
8、路由传参和name属性传参
9、去掉路径的#
10、路由守卫:全局路由守卫和局部路由守卫
第二阶段
"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具名插槽
异步加载数据后，放置轮播器中的图片无法拖动：
添加observer:true配置"
5、电影页面导航栏（正在热映和即将上映）
6、显示正在热映请求数据（特殊处理设置请求头获取数据和反向代理）
7、过滤处理数据Vue.filter
8、电影页面导航栏固定定位效果
9、电影详情页面
10、影院页面数据加载
"11、better-scroll模块:平滑的拖动
npm install better-scroll --save"
"12、事件总线（适合小项目）：组件通讯
实现进入详情页面隐藏下方导航栏，离开详情页面，显示下方导航栏的功能"
"13、状态管理vuex（适合大项目）
npm install vuex --save
再次实现进入详情页面隐藏下方导航栏，离开详情页面，显示下方导航栏的功能"
"14、调试工具devtool
创建文件夹VUEDEVTOOLS，在改文件夹下运行npm install vue-devtools
将VUEDEVTOOLS\node_modules\vue-devtools\vender\manifest.json文件中的
persistent属性修改为true
打开google浏览器，更多工具-扩展程序-打开开发者模式-点击加载已解压的扩展程序-
选择VUEDEVTOOLS\node_modules\vue-devtools\vender
重启后点击浏览器右上角扩展程序图标"
15、vuex实现数据缓存：缓存即将上映数据
16、export规则
17、简化获取vuex属性的代码：mapState简化$store.state.isShowBar
18、TOP3电影处理：vuex的getters实现（略）
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系统中一种消息提示框类型，是一个View 视图，快速的为用户显示少量的信息。Toast 在应用程序上浮动显示信息给用户，它永远不会获得焦点，不影响用户的输入等操作，主要用于 一些帮助 / 提示。Toast 最常见的创建方式是使用静态方法 Toast.makeText。
