寒假集训——十七

rem

1. hash路由=> location.hash切换
   window.onhashchange 监听路径的切换
2. history路由=>history.pushState切换
   window.onpopstate 监听路径的切换

选项卡封装

各种控制样式，各种引入导入，各种静态资源
创建一个components目录,并在目录下创建对应的组件.vue文件
把对应的标签页面内容放进对应的组件.vue中,不要忘了加上script和style内容
在index.vue文件中通过import…form…引入对应的组件
在标签页中放组件即 <组件名>

axios封装

mounted () {
	http({
		url:
			'/gateway?cityId=440100&pageNum=1&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
	}）
}，

详情渲染

不建议用空数组，会报错
建议通过null

详情Header-组件

通过window.onscroll，if判断，大于一定距离显示详情，
最后记得小于一定距离的时候要清空

Vue.directive('scroll', {
inserted (el) E
// console.log(el)
el.style.display = 'none'

window.onscroll =()=>{
if ((document.documentElement.scrollTop || document.body.
scrollTop) > 50){
el.style.display = 'block'
} else {
el.style.display = 'none'
}
}）

要记得销毁声明周期:unbind

//销毁执行的
unbind(){
window.οnscrοll= null
}
}）