imagelist和imgshow跳转之间的参数传递

• 核心技术

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);
      }

• imagelist.vue

<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>