使用npm安装 vue-lazyload 组件
npm -i vue-lazyload -S
使用方法 在 components 文件夹下创建一个组件 myImage.vue
<template>
// 图片方式
<!-- #ifdef APP-PLUS||MP-WEIXIN -->
<image :lazy-load="true" :src="imgpath"
:style='{width:imgwidth,height:imgheight}'
></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<img v-lazy="imgpath" >
<!-- #endif -->
</block>
</template>
<script>
import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
export default{
// props:['imgpath']
props:{
imgpath:{
type:String
},
imgwidth:{
type:String,
default:'100%'
},
imgheight:{
type:String,
default:'100%'
}
}
}
</script>
<style>
img{
width: 100%;}
/* .imgBox{width: 100%;height: 100%;} */
/* .imageStyle{width: 100%!important;height: 100%!important;;display: block;} */
img[lazy=loading] {
/*加载中*/
}
img[lazy=error] {
/*加载失败*/
}
img[lazy=loaded] {
/*加载完成*/
}
</style>
// 背景图方式
<block v-for="(item,index) in list" :key="index">
<!-- #ifdef APP-PLUS -->
<image :lazy-load="true" :src="item.img"></image>
<!-- #endif -->
<!-- #ifdef H5 -->
<view v-lazy:background-image="{loading:'/static/loading.png',error:'/static/error.png',src:item.img}"></view>
<!-- #endif -->
在main.js全局中注册
import myImage from './components/myImage.vue'
Vue.component('my-image',myImage)
使用方法
<my-image :imgpath="imgUrl+item.content[0].img"></my-image>