Lazyload

图片懒加载。

引入

  1. import { Lazyload } from 'we-vue'
  3. Vue.use(Lazyload)

例子

基本示例

  1. <template>
  2.   <div class="page">
  3.     <ul class="lazyload-list">
  4.       <li class="lazyload-list-item" v-for="item in list">
  5.         <img v-lazy="item" class="lazyload-image">
  6.       </li>
  7.     </ul>
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   data () {
  14.     return {
  15.       list: [
  16.         'https://cdn.pixabay.com/photo/2015/03/18/09/31/prairie-679014__340.jpg',
  17.         'https://cdn.pixabay.com/photo/2015/03/18/09/29/the-scenery-679011__340.jpg',
  18.         'https://cdn.pixabay.com/photo/2015/03/28/16/40/lake-696098__340.jpg',
  19.         'https://cdn.pixabay.com/photo/2013/07/01/17/36/sunset-142698__340.jpg',
  20.         'https://cdn.pixabay.com/photo/2013/11/10/20/53/forest-208517__340.jpg',
  21.         'https://cdn.pixabay.com/photo/2015/01/08/15/48/creek-593146__340.jpg'
  22.       ]
  23.     }
  24.   }
  25. }
  26. </script>