1.home跳到imagelist
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
<router-link to="/photo/imagelist">
<span class="mui-icon mui-icon-email"></span>
<div class="mui-media-body">图片分享</div>
</router-link>
</li>
2.imagelist跳到imgshow
<!-- 2.0 图片的列表 使用mint-ui中的延迟加载组件 -->
<ul class="imgul">
<li v-for="item in imagelist">
<router-link v-bind="{to:'/photo/imageshow/'+item.id}">
<img class="lazyimg" v-lazy ="item.img_url">
<div class="desc">
<h5>{{item.title}}</h5>
<p>
{{item.zhaiyao}}
</p>
</div>
</router-link>
</li>
</ul>
3.data里面放要的数据cates:[], // 存储分类数据， imagelist:[] // 存储图片数据
3.头上的分类数据，要实现滑动效果，全部是不变的，点击相应的标题得到对应id的图片
滑动效果：.cate{
max-width: 400px;
overflow-x:auto; --不隐藏，会有滚动条出来
overflow-y:hidden;
设置ul的宽度this.$refs.cateul.style.width=width+"px";
}这样写在电脑上可以看到滚动条，但是在手机上面看不到
4.加载图片用了用mint-ui中的延迟加载组件
<img class="lazyimg" v-lazy ="item.img_url">
image[lazy=loading] {
width: 100%;
height: 300px;
margin: auto;
}
url的地址不全面，所以要遍历拼接地址
获取图片的途径是点击事件<li v-for="item in cates"><a @click="getimagelist(item.id)">{{item.title}}</a></li>
5.初始化的时候就要先加载了
created(){
this.getcates();
this.getimagelist(0);
}
<template>
<div class="tmpl">
<!-- 1.0 图片的分类 -->
<div class="cate">
<ul ref="cateul">
<li><a href="#">全部</a></li>
<li v-for="item in cates"><a @click="getimagelist(item.id)">{{item.title}}</a></li>
</ul>
</div>
<!-- 2.0 图片的列表 使用mint-ui中的延迟加载组件 -->
<ul class="imgul">
<li v-for="item in imagelist">
<router-link v-bind="{to:'/photo/imageshow/'+item.id}">
<img class="lazyimg" v-lazy ="item.img_url">
<div class="desc">
<h5>{{item.title}}</h5>
<p>
{{item.zhaiyao}}
</p>
</div>
</router-link>
</li>
</ul>
</div>
</template>
<script>
import common from '../../kits/common.js'
export default{
data(){
return {
cates:[], // 存储分类数据
imagelist:[]
}
},
methods:{
// 1.0 获取分类数据
getcates(){
this.$http.get(common.apiDomain+'/api/getimgcategory')
.then(res=>{
// 状态判断，将内容给this.cates
this.cates = res.body.message;
// 获取分类数据的个数计算出ul的总宽度，+1是因为前面有个全部
var count = res.body.message.length + 1;
//每一个宽度78
var width = 78 * count;
// 在ul上设置宽度，要加上px
this.$refs.cateul.style.width=width+"px";
});
},
// 2.0 获取图片数据
getimagelist(cateid){
// 为了解决第一章图片永远不会改变的bug
this.imagelist = [];
// 1.0 利用ajax请求图片数据
var url = common.apiDomain+'/api/getimages/'+cateid;
this.$http.get(url).then(res=>{
// 2.0 将res.body.message中的 img_url属性的值添加上图片域名的前缀
res.body.message.forEach(item=>{
item.img_url = common.imgDomain+item.img_url;
});
this.imagelist = res.body.message;
});
}
},
created(){
this.getcates();
this.getimagelist(0);
}
}
</script>
<style scoped>
.cate{
max-width: 400px;
overflow-x:auto;
overflow-y:hidden;
}
.cate li{
list-style: none;
display: inline-block;
padding-left: 10px;
}
.cate ul{
width: 800px;
padding-left: 5px;
}
.imgul{
padding: 0 2px;
}
.imgul li{
list-style: none;
position: relative;
}
.lazyimg{
width: 100%;
}
image[lazy=loading] {
width: 100%;
height: 300px;
margin: auto;
}
.desc{
position: absolute;
left: 0px;
bottom:0px;
background-color: rgba(0,0,0,0.4);
}
.desc h5,.desc p{
color:#fff;
}
</style>
