圖片的懶加載----------文字懸浮於圖片上----設置文字的最大高度---圖片的li相對定位---文字絕對定位

時間 2019-11-26

原文原文鏈接

//1.1導入Mint-UI中圖片懶加載組件

import { Lazyload } from 'mint-ui';

Vue.use(Lazyload);

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>

-------------------------------------------------------------------------------------------html

<li>------------positition: relationvue

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

　　position: absolute;url

　　bottom: 0;　　spa

}code

設置文字的最大高度router

max-height: 84px;htm

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>