• 核心技術(shù)

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里面放要的數(shù)據(jù)cates:[], // 存儲(chǔ)分類(lèi)數(shù)據(jù)， imagelist:[] // 存儲(chǔ)圖片數(shù)據(jù)
3.頭上的分類(lèi)數(shù)據(jù)，要實(shí)現(xiàn)滑動(dòng)效果，全部是不變的，點(diǎn)擊相應(yīng)的標(biāo)題得到對(duì)應(yīng)id的圖片
  滑動(dòng)效果：.cate{
      max-width: 400px;
      overflow-x:auto;  --不隱藏，會(huì)有滾動(dòng)條出來(lái)
      overflow-y:hidden; 
設(shè)置ul的寬度this.$refs.cateul.style.width=width+"px";
  }這樣寫(xiě)在電腦上可以看到滾動(dòng)條，但是在手機(jī)上面看不到
4.加載圖片用了用mint-ui中的延遲加載組件
 <img class="lazyimg" v-lazy ="item.img_url">
image[lazy=loading] {
    width: 100%;
    height: 300px;
    margin: auto;
  }
url的地址不全面，所以要遍歷拼接地址
獲取圖片的途徑是點(diǎn)擊事件<li v-for="item in cates"><a @click="getimagelist(item.id)">{{item.title}}</a></li>
5.初始化的時(shí)候就要先加載了
created(){
          this.getcates();
          this.getimagelist(0);
      }

• imagelist.vue

<template>
    <div class="tmpl">
        <!-- 1.0 圖片的分類(lèi) -->
        <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:[], // 存儲(chǔ)分類(lèi)數(shù)據(jù)
                imagelist:[] 
            }
        },
        methods:{
            // 1.0 獲取分類(lèi)數(shù)據(jù)
            getcates(){
                this.$http.get(common.apiDomain+'/api/getimgcategory')
                .then(res=>{
                    // 狀態(tài)判斷，將內(nèi)容給this.cates 
                    this.cates = res.body.message;
                    // 獲取分類(lèi)數(shù)據(jù)的個(gè)數(shù)計(jì)算出ul的總寬度，+1是因?yàn)榍懊嬗袀€(gè)全部
                    var count = res.body.message.length + 1;
                     //每一個(gè)寬度78
                    var width = 78 * count; 
                    // 在ul上設(shè)置寬度，要加上px
                    this.$refs.cateul.style.width=width+"px";
                });
            },
            // 2.0 獲取圖片數(shù)據(jù)
            getimagelist(cateid){
                // 為了解決第一章圖片永遠(yuǎn)不會(huì)改變的bug
                this.imagelist = [];
                // 1.0 利用ajax請(qǐng)求圖片數(shù)據(jù)
                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>