影院组件
更改滚动条范围：
动态结算高度
//动态结算高度
this.height = document.documentElement.clientHeight-选项卡高度
this.height = document.documentElement.clientHeight- document.querySelector('footer').offsetHeight + 'px'
组件库elementUI
网址elementUI
组件渲染：
sideList" :key="data.id">
<el-submenu index="1" v-for="data in
<template slot="title"
><i class="el-icon-message"></i>导航一</template
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
改为字符串：
加一个" "
vant引入
节点是this.$refs.navbar.$el
vant应用
通过查询文档，复制粘贴，增加点击事件，如预览效果 ，
通过传入index值，获取每次页面打开时显示的图片页
数据懒加载
每次检测到到底，触发函数获取数据
因为上面这个元素会导致第一次就立即触发到底的效果
List组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部
时，会触发 load 事件并将 loading设置成 true。此时可以发起异步操作并更
新数据，数据更新完毕后，将loading设置成false 即可。若数据已全部加载完
毕，则直接将finished 设置成 true 即可。
取数据：
this.current++
http({
url: /gateway?cityId=440100&pageNum=${this.current}&pageSize=10&
type=1&k=5196770,
headers: {
'X-Host':'mall.film-ticket.film.list'
}
}).then((res)=>{
// console.log(res.data.data.films)
this.datalist = res.data.data.films
}）
如果到底了，就停止
if (this.datalist.length=this.total//后端数据的总长度 ）{
this.finished = true
return}
loading加载&axios拦截
加载：
Toast.loading({
message：'加载中.….'，
forbidclick: true
})
是方法 ，需要单独引入
duration展示时长（ms），值为0时，toast不会消失
默认2000
//在成功后拦截--hideloading
http.interceptors.response.use(function (response){
// Any status code that lie within the range of 2xx cause this function to
//trigger
// Do something with response data
city数据组件
this.$router.push('/city')
点击事件实现跳转
实现原理
1,316条==>A，B进行分组
2．利用转换后的数组，结合组件库进行渲染页面。
过滤：
console.log(letterList)
//
letterList.forEach(Letter => {
var newList = list.filter(item => item.pinyin.substring(0, 1).
toUpperCase() === letter)
console.log(newList)
}）
vuex引入
IndexBar索引栏
vuex：
Vue.use(Vuex)
export default new Vuex.Store({
// state公共状态
state: {
cityId: '310100'
cityName:'上海'
}）
mutations: {
changeCityName (state, cityName) {
state.cityName =cityName
// console.log(cityName)
}
vuex异步引入
// vuex 管理保存公共状态，（分散在各个组件内的状态，统一管理，）
//注意：
//vuex默认是管理在内存， 一刷新页面，公共状态就丢失了。
// vuex 持久化-todo
/*vuex 项目应用
1.非父子的通信
2.后端数据的缓存快照，减少重复数据请求，减轻服务器压力，提高用户体验
*/
vuex新写法
export default {
data () {
return {
height:'opx'
}
},
computed: {
cinemaList: function () {
return this.$store.state.cinemalist
}
}，
import {mapState,mapActions,mapMutations} from 'vuex'
methods:{
...mapActions(['getCinemaData']),
...mapMutations(['clearCinema']),
handleLeft(){
// console.log('left')
this.$router.push('/city')
//清空cinemaList
this.$store.commit('clearCinema')
}，
底部选项卡
show (state){
state.isTabbarShow = true
}，
hide (state) K
state.isTabbarShow = false
}
var obj = {
created () {
this.$store.commit('hide')
},
destroyed () {
this.$store.commit('show')
}
vue持久化 vue-persist
github下载
