<!DOCTYPE html>
<html>
<head>
<title>组件切换练习</title>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/vue-router.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/css.css">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<base target="_blank" />
</head>
<body>
<div id="app"></div>
<script type="text/javascript">
const baseRequstUrl = "https://api.douban.com/";
var App=Vue.component("app1",{
template:`
<div id="app" class="app">
<transition name="fade" tag="div" mode="out-in">
<router-view></router-view>
</transition>
</div>`,
data:function(){
return {}
},
})
//列表
var index=Vue.component("index",{
template:
`<div>
<h1>豆瓣Top250</h1>
<div class="nodata" v-if="loading">加载中...</div>
<div class="nodata" v-if="err">{{err}}</div>
<transition-group name="fade" tag="ul" class="movie_list clearfix content" mode="out-in">
<li v-for="(item,index) in list" :key="item">
<router-link :to="{ path: '/detail/'+item.id}">
<div class="movie_list_img" :style="{ backgroundImage:'url('+item.images.large+')'}" :title="item.title"></div>
<div class="title">{{item.title}}</div>
<div class="original_title">{{item.original_title}}</div>
<div class="original_title" style="padding-top:5px">{{item.genres?item.genres.join("/"):""}}</div>
</router-link>
</li>
</transition-group>
<div class="page">
<ul class="pageCon">
<li v-for="i in parseInt(total/count)" :class="{active:activeIndex==i}" @click=pageHandle(i,$event)>{{i}}</li>
</ul>
</div>
</div>`,
data:function(){
return {
loading:false,
err:null,
list:[],
total:0,
count:20,
start:0,
activeIndex:1,
nodata:false
}
},
methods:{
getDate:function(){
const _this=this;
_this.loading=true;
$.ajax({
type: "get",
async: false,
url: baseRequstUrl+"v2/movie/top250?count="+_this.count+"&&start="+_this.start,
dataType: "jsonp",
success: function(data){
_this.loading=false;
_this.list=data.subjects;
_this.total=data.total;
if(data.total.length==0){this.nodata=true}
},
error: function(){
_this.err="加载失败，请刷新重试"
alert('fail');
}
});
},
pageHandle:function(index,obj){
this.list=[];
this.activeIndex=index;
this.start=(index-1)*this.count+1;
this.getDate();
var ul=$(obj.path[1]);
var li=$(obj.path[0]);
var length=parseInt(this.total/this.count);
change_page(index-1);
function change_page(eqindex){
if(eqindex<0 )
{
index=0;
}
else if(eqindex>=length ){
index=length-1;
}
if(index-5<=0){
leftIndex=0;
}
else if(index>length-10)
{
leftIndex=Math.ceil(length-10);
}
else{
leftIndex=index-1;
}
ul.animate({"left":"-"+leftIndex*li.outerWidth()+"px"},200);
}
}
},
mounted:function(){
this.getDate()
}
})
var detail=Vue.component("detail1",{
template:`
<div class="movie_detail">
<h1>电影详情</h1>
<div class="nodata" v-if="loading">正在加载...</div>
<div class="detail_con content clearfix" v-else>
<transition-group name="fade" tag="div" mode="out-in">
<div class="item1 clearfix" key="detail">
<div class="img_con left">
<img :src="data.images?data.images.large:'' "/>
</div>
<div class="movie_con right">
<h3>{{data.title}}</h3>
<p>{{data.original_title}}</p>
<p>分类：{{data.genres?data.genres.join("/"):""}}</p>
<p>主演：{{mainPerson}}</p>
<div class="level clearfix">
<div class="like" @click.once="like=!like">
<img :src="likeImg" class="icon">
喜欢{{data.wish_count}}
</div>
<div class="like" @click.once="yes=!yes">
<img :src="yesImg" class="icon">
人气{{data.collect_count}}
</div>
</div>
<div class="des">
简介：{{data.summary}}
</div>
<a :href="data.share_url">
<div class="play_con">
<img src="images/play.png" class="icon"/>
立即播放
</div>
</a>
</div>
</div>
</transition-group>
</div>
</div>
`,
data:function(){
return {
loading:false,
err:null,
like:false,
yes:false,
data:[]
}
},
computed:{
likeImg:function(){
return this.like?"images/like_a.png":"images/like.png"
},
yesImg:function(){
return this.yes?"images/yes_a.png":"images/yes.png"
},
mainPerson:function(){
let arr=[];
if(this.data.casts){
for(let i=0;i<this.data.casts.length;i++)
{
arr.push(this.data.casts[i].name);
}
return arr.join(" / ")
}
else{
return""
}
}
},
filter:{
},
methods:{
getDate:function(){
const _this=this;
_this.loading=true;
$.ajax({
type: "get",
async: false,
url: baseRequstUrl+"v2/movie/subject/"+this.$route.params.id,
dataType: "jsonp",
success: function(data){
_this.loading=false;
_this.data=data;
},
error: function(){
_this.err="加载失败，请刷新重试";
alert('fail');
}
});
}
},
mounted:function(){
this.getDate();
}
})
var router= new VueRouter({
routes:[
{
path: '/',
component: index
},
{
path: '/detail/:id',
name: "some",
component: detail
}
]
});
new Vue({
el:"#app",
router,
render:(h)=>h(App)
})
</script>
</body>
</html>
css.css
*{padding: 0;margin:0;}
ul,li{list-style: none}
body{background: #151515; font-family: "微软雅黑"}
img{max-width: 100%}
a{text-decoration: none;}
.left{float: left;}
.right{float: right;}
.icon{width: 16px;height: 16px;vertical-align: middle;}
.clearfix{}
.clearfix::after{content:"";width: 100%;height: 0;clear: both;display: block;}
.content{width: 1200px;margin:0 auto;}
h1{color:#2ad487;line-height: 80px ;border-bottom: 3px solid #2ad487;background-color: #222; text-indent: 20px; margin-bottom: 20px }
ul.movie_list li{ background: #222;float: left;width: 280px;margin: 10px;/*#2ad487*/; padding: 12px; height:465px; transition:all 500ms;box-sizing: border-box;}
ul.movie_list li:hover{border-color:#2ad487; -webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -3px, 0); }
ul.movie_list li .movie_list_img{height: 350px;background-size: 100% 100%; margin-bottom: 10px}
ul.movie_list li .title{color: #ddd; font-weight: 700;font-size: 16px; margin-bottom: 5px}
ul.movie_list li .original_title{ color: #999; font-size: 12px }
.page{width: 300px;height: 30px;margin: 20px auto;color: #fff;position: relative;overflow: hidden;}
ul.pageCon{position: absolute;top: 0;left: 0;width: 200%}
ul.pageCon li{float: left;height:30px;line-height: 30px;background: #333;box-sizing: border-box;border:1px solid #666; width: 30px; text-align: center; cursor: pointer;}
ul.pageCon li.active{background:#2ad487 }
.nodata{text-align: center;margin: 50px auto; color: #fff}
.fade-enter-active, .fade-leave-active { transition: opacity .5s}
.fade-enter, .fade-leave-active { opacity: 0}
/*detail页面*/
.detail_con{padding-top: 20px}
.img_con{width:300px }
.movie_con{width:850px;color: #eee}
.movie_con h3{font-size: 24px; margin-bottom: 20px}
.movie_con p{line-height: 24px;color: #999;font-size: 14px}
.movie_con .level{color:#EA9518; border-bottom: 1px solid #222;font-size: 14px}
.movie_con .level .like{float: left;margin:10px 20px 20px 0; cursor: pointer;}
.movie_con .des{ font-size: 14px;padding: 20px 0;line-height: 24px;height: 140px; overflow: auto}
.movie_con .play_con{width: 200px;height: 50px;line-height: 50px; background:#009451;color: #fff;border-radius: 5px;text-align: center; cursor: pointer;margin-top: 20px;}
.movie_con .play_con>img{margin-left: -25px;margin-right: 10px}