图片的懒加载----------文字悬浮于图片上----设置文字的最大高度---图片的li相对定位---文字绝对定位

//1.1导入Mint-UI中  图片懒加载组件

import { Lazyload } from 'mint-ui';

Vue.use(Lazyload); 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

Lazy load 图片懒加载指令。   引入 import { Lazyload } from 'mint-ui';   Vue.use(Lazyload); 例子 为 img 元素添加 v-lazy 指令，指令的值为图片的地址。同时需要设置图片在加载时的样式。   <ul>   <li v-for="item in list">     <img v-lazy="item">   </li> </ul> image[lazy=loading] {   width: 40px;   height: 300px;   margin: auto; } 若列表不在 window 上滚动，则需要将被滚动元素的 id 属性以修饰符的形式传递给 v-lazy 指令   <div id="container">   <ul>     <li v-for="item in list">       <img v-lazy.container="item">     </li>   </ul> </div>

　　

 

 

 

 

-------------------------------------------------------------------------------------------

 

<li>------------positition: relation

文字-------.info {

　　position: absolute;

　　bottom: 0;　　

}

 设置文字的最大高度

max-height: 84px;

 

tag="li"--------------由于vue 需要路由跳转，所以将 li标签换成<router-link>标签‘

所以要指定一下tag

 

    <!-- 图片的列表区域 -->
        <ul class="lazyul">
            <router-link tag="li" v-for="item in photolist" :key="item.id" :to="'/home/photoinfo/' + item.id">
                <!-- 注意： v-lazy 要指定图片的地址 -->
                <img v-lazy="item.img_url">
                <div class="info">
                    <h1 class="info-title">{{ item.title }}</h1>
                    <div class="info-content">{{ item.zhaiyao }}</div>
                </div>
            </router-link>
        </ul>
<style>

.lazyul {
  margin: 0;
  padding: 10px;


  li {
    background-color: #ccc;
    text-align: center;
    box-shadow: 0 0 7px gray;
    position: relative;
    & + li {
      // 这种样式的写法，适合场景： 排除第一个，应用给其它所有的li
      margin-top: 10px;
    }
    img {
      vertical-align: middle;
      width: 100%;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
  }
}






.info {
  position: absolute;
  bottom: 0;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  max-height: 86px;
  overflow: hidden;
  .info-title {
    font-size: 14px;
  }
  .info-content {
    font-size: 13px;
    text-align: left;
    text-indent: 2em;
  }
}

</style>