更新记录

2.2（2024-06-23）

1. 修改示例项目

2.1（2024-06-23）

1. 无

2.0（2024-06-23）

1. 优化nvue懒加载流畅度

平台兼容性

Joshua-lazyLoad-cache

该组件实现了对图片的懒加载功能和图片缓存的使用，大大提升了图片的渲染速度。可以下载示例项目查看里面的 app-vue app-nvue 配合响应式瀑布流写法

注意： nvue如果开启图片懒加载，请看示例项目怎么写，避免出现各种问题

可以加入QQ群(967170241)进行反馈问题
如果您对我的组件感到满意，请考虑给予五星评价您的支持是对我的工作极大的肯定！

vue 懒加载用法

<view v-for="(item, index) in data" :key="item.ID">
    <Joshua-lazyLoad-cache-image bgColor='rgba(0,0,0,.2)' :lazyLoad="true" :src='item.src'></Joshua-lazyLoad-cache-image>
</view>

nvue 懒加载用法

<template>
    <view class="content">
        <scroll-view :scroll-with-animation="true" :show-scrollbar="false" @scroll="listScroll" :scroll-y="true"
            :style="{height: (listInfo.h + 'px')}" style="background-color: palegoldenrod;">
            <view class="gallEry">
                <view :style="'width:' + imgW  + 'px'" class="gallEryBox" v-for="(numVal, index) in flowData.column"
                    :key="numVal">
                    <view :style="'width:' + imgW  + 'px'" class="gallEryBox_item"
                        v-for="(item, j) in flowData[`column_${index + 1}`]" :key="item.src.split('/').pop()">
                        <Joshua-lazyLoad-cache-image bgColor='rgba(0,0,0,.2)' :duration="1000" :lazyLoad="lazyLoad"
                            :listInfo="listInfo" bgHeight="100px" :width="imgW + 'px'" :cache="cache" fatherTop="0"
                            className="imgBox" :src='item.src' :nvueLazyLoadBottomNumber="300">
                        </Joshua-lazyLoad-cache-image>
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    import imgArr from '@/common/img.js'
    export default {
        data() {
            return {
                imageList: [],
                flowData: {
                    column: 2
                },
                pageW: 0,
                listInfo: {
                    y: 0,
                    h: 0
                }
            }
        },
        onLoad() {
            this.getData()
            this.listInfo.h = uni.getSystemInfoSync().windowHeight
        },
        onShow() {
            this.getColnum()
        },
        computed: {
            imgW() {
                return ((this.pageW - 10) - ((this.flowData.column - 1) * 10)) / this.flowData.column
            }
        },
        methods: {
            listScroll(e) {
                this.listInfo.y = e.detail.scrollTop
            },
            getColnum() {
                const screenState = screenSizeGrid();
                screenState.subscribeToUpdates(() => {
                    this.pageW = screenState.getWindowWidth()
                    this.flowData.column = screenState.getColumn() + 1
                    this.changeColumn()
                });
            },
            changeColumn() {
                let groupList = dynamicGrouping(this.imageList, this.flowData.column);
                groupList.forEach((item, i) => (this.flowData[`column_${i + 1}`] = item))
            }
            getData() {
                this.imageList = imgArr.map(url => ({
                    src: url
                }))
                this.getColnum()
            },
            dynamicGrouping(data, i) {
                if (i <= 0) return
                const groups = [];
                for (let j = 0; j < i; j++) {
                    groups.push([]);
                }
                for (let k = 0; k < data.length; k++) {
                    const groupIndex = k % i;
                    groups[groupIndex].push(data[k]);
                }
                return groups;
            },
            screenSizeGrid() {
                let column = 0
                let windowWidth = 0
                const state = {
                    getColumn: () => column,
                    getWindowWidth: () => windowWidth
                };
                let systemInfo = uni.getSystemInfoSync();
                let screenWidth = systemInfo.screenWidth;
                const windowResizeCallback = (res = {
                    size: {}
                }) => {

                    windowWidth = res.size.windowWidth || screenWidth;
                    if (windowWidth < 539) {
                        column = 1
                    } else if (windowWidth < 970 && windowWidth > 539) {
                        column = 2
                    } else if (windowWidth > 970) {
                        column = 3
                    }

                    uni.$emit('windowResizeUpdate');
                }
                windowResizeCallback()
                uni.onWindowResize(windowResizeCallback);
                return {
                    ...state,
                    subscribeToUpdates: (callback) => {
                        uni.$on('windowResizeUpdate', callback);
                    }
                };
            }

        }
    }
</script>

<style lang="scss">
    .imgBox {
        border: 1px solid #000;
        overflow: hidden;
    }

    .area {
        display: flex;
        justify-content: space-around;
        flex-direction: row;
        flex-wrap: wrap;
        height: 60px;
    }

    .gallEry {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        width: 750rpx;
        padding: 0 10rpx;
    }

    .gallEryBox {
        display: flex;
        flex-direction: column;
    }

    .gallEryBox_item {
        margin-bottom: 10px;
    }
</style>

Props

Event 事件