更新记录

2.2（2020-05-06）

1. 新增提供多种loading加载中的占位图效果模式选择
2. 调整open-transition属性默认值为true

2.0（2020-03-29）

1.修复某种场景获取节点信息为空时的错误捕获 2.扩展属性mode同image的属性mode 3.重构样式更具扩展性

1.0（2020-03-25）

发布 easy-loadimage1.0

平台兼容性

图片预加载和懒加载组件（兼容H5、APP、小程序）

组件特性

• 支持图片懒加载，滚动监听动态获取图片节点坐标信息判定是否加载，加载成功后停止监听滚动事件避免重复判定

• 支持图片预加载，提前加载，加载成功前渲染loading占位图，加载成功后显示原图

• 支持图片加载失败展示加载失败占位图

• 支持开启加载成功后的图片渐现过渡效果

• 占位图使用的是背景图uni-app自动转为base64（小于40kb）

• 提供多种loading加载中的占位图效果模式选择

组件属性

view-height属性说明

• 在大量图片在同一个页面使用该组件时可传入可视区域高度，避免重复获取窗口高度
• 你也可以在页面（父组件）传入比真机可视窗高度更大的值当做阈值提前进入加载

loading属性说明

你也可以在以此类推在源码上修改或者扩展为你理想的样式

使用示例

图片高度自适应（示例）

<template>
    <view class="list">
        <view class="item" v-for="(item,index) of list" :key="index">
            <easy-loadimage mode="widthFix"
                :scroll-top="scrollTop"
                :image-src="item.image"></easy-loadimage>
            <text>{{item.content}}</text>
        </view>
    </view>
</template>
<script>
    import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
    const MockData = require('@/static/easy-loadimage/mock-data.json')
    export default{
        components:{easyLoadimage},
        data(){
            return {
                list:MockData,
                scrollTop:0
            }
        },
        onPageScroll({scrollTop}) {
            // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
            this.scrollTop = scrollTop;
        },
    }
</script>
<style scoped>
    .list{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32rpx;background: #F1F1F1;}
    .list .item{width: 48%;background: #fff;margin-bottom: 80rpx;border-radius: 20rpx;}
    .list .item >>> .easy-loadimage{
        width: 100%;
        /* height: 500rpx; */
        margin-bottom: 38rpx;
    }
    .list .item >>> .origin-img{
        border-radius: 20rpx;
    }
    /* mode为widthFix即图片高度自适应时要设置占位图默认高度 */
    .list .item >>> .loadfail-img,.list .item >>>.loading-img{
        height: 500rpx;
    }
</style>

注意 ⚠⚠⚠

使用深度作用选择器>>>或在插件源码CSS部分上进行样式修改

• 当图片固定高度时，在图片父元素设定高度即可
• 当图片高度自适应时，需要设置占位图样式，参考示例

scrollTop如果没有发生变化导致插件不工作，是因为onPageScroll只在页面才被触发，需要进行传值

类名元素说明

线上预览 👇👇👇

https://jianjroh.gitee.io/uniapp_plug_in_development/#/pages/easy-loadimage/easy-loadimage