真爱跑车app

<view v-if="!ad">
			<!-- 搜索功能 -->
			<view class="uni-search-box">
				<uni-search-bar v-model="keyword" ref="searchBar" radius="100" cancelButton="none" disabled
					:placeholder="inputPlaceholder" />
				<view class="cover-search-bar" @click="searchClick"></view>
			</view>
			<view class="example-body">
				<uni-grid :column="4" :showBorder="false" :highlight="true" @change="change">
					<template v-for="(item,i) in gridList">
						<uni-grid-item :index="i" :key="i" v-if="i<4">
							<view class="grid-item-box" style="background-color: #ebd2e7;">
								<image :src="'/static/grid/c'+(i+1)+'.jpg'" class="image" mode="aspectFill" />
								<text class="text">{{item}}</text>
							</view>
						</uni-grid-item>
					</template>
				</uni-grid>
			</view>
			<unicloud-db ref='udb' v-slot:default="{data,pagination,hasMore, loading, error, options}"
				@error="onqueryerror" @load="getcache" :collection="colList" :page-size="10">
				<!-- 作用于app端nvue页面的下拉加载 -->
				<!-- #ifdef APP-NVUE -->
				<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
				<!-- #endif -->

				<view class="page">
					<WaterfallsFlow :wfList='data' @itemTap="itemTap" />
				</view>

				<!-- 加载状态：上拉加载更多，加载中，没有更多数据了，加载错误 -->
				<!-- #ifdef APP-PLUS -->

				<!-- #endif -->
				<uni-load-state @networkResume="refresh" :state="{data,pagination,hasMore, loading, error}"
					@loadMore="loadMore">
				</uni-load-state>
				<!-- #ifdef APP-PLUS -->

				<!-- #endif -->

			</unicloud-db>
		</view>

瀑布流（抄来的）

<template>
    <view class="wf-page">
        <!--    left    -->
        <view>
            <view id="left" v-if="leftList.length">
                <view v-for="(item,index) in leftList" :key="index"
                      class="wf-item" @tap="itemTap(item)">
                    <WaterfallsFlowItem :item="item"/>
                </view>
            </view>
        </view>


        <!--    right    -->
        <view>
            <view id="right" v-if="rightList.length">
                <view v-for="(item,index) in rightList" :key="index"
                      class="wf-item" @tap="itemTap(item)">
                    <WaterfallsFlowItem :item="item"/>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItem.vue'

export default {
    components: {
        WaterfallsFlowItem
    },
    props: {
        // 瀑布流列表
        wfList: {
            type: Array,
            require: true
        },
        updateNum: {
            type: Number,
            default: 10
        }
    },
    data() {
        return {
            allList: [],       // 全部列表
            leftList: [],      // 左边列表
            rightList: [],     // 右边列表
            mark: 0,           // 列表标记
            boxHeight: [],     // 下标0和1分别为左列和右列高度
        };
    },
    watch: {
        // 监听列表数据变化
        wfList() {
            // 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
            if (!this.wfList.length ||
                (this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
                this.allList = [];
                this.leftList = [];
                this.rightList = [];
                this.boxHeight = [];
                this.mark = 0;
            }

            // 如果列表有值，调用waterfall方法
            if (this.wfList.length) {
                this.allList = this.wfList;
                this.waterFall()
            }
        },

        // 监听标记，当标记发生变化，则执行下一个item排序
        mark() {
            const len = this.allList.length;
            if (this.mark < len && this.mark !== 0) {
                this.waterFall();
            }
        }
    },
    methods: {
        // 瀑布流排序
        waterFall() {
            const i = this.mark;
            if (i === 0) {
                // 初始化，从左边开始插入
                this.leftList.push(this.allList[i]);
                // 更新左边列表高度
                this.getViewHeight(0);
            } else if (i === 1) {
                // 第二个item插入，默认为右边插入
                this.rightList.push(this.allList[i]);
                // 更新右边列表高度
                this.getViewHeight(1);
            } else {
                // 根据左右列表高度判断下一个item应该插入哪边
                const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
                if (leftOrRight) {
                    this.rightList.push(this.allList[i])
                } else {
                    this.leftList.push(this.allList[i])
                }
                // 更新插入列表高度
                this.getViewHeight(leftOrRight);
            }
        },
        // 获取列表高度
        getViewHeight(leftOrRight) {
            const query = uni.createSelectorQuery().in(this);
            const id = leftOrRight ? '#right' : '#left';
            // 使用nextTick，确保页面更新结束后，再请求高度
            this.$nextTick(() => {
                query.select(id).boundingClientRect(res => {
                    res ? this.boxHeight[leftOrRight] = res.height : '';
                    this.mark = this.mark + 1;
                }).exec();
            })
        },

        // item点击
        itemTap(item) {
            this.$emit('itemTap', item)
        }
    }
}
</script>

<style lang="scss" scoped>
$page-padding: 10px;
$grid-gap: 10px;

.wf-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: $grid-gap;
    padding: 10px $page-padding;
}

.wf-item {
    width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
    padding-bottom: $grid-gap;
}
</style>

瀑布流(抄来的)item

<template>
	<view class="wf-item-page">
		<image :src="item.image" mode="widthFix" class="item-img" />
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 5px;
	}

	.item-img {
		width: 100%;
	}
</style>

图片缓存策略关键函数：

getImageCache(filePath, fileMd5) {
				// 图片缓存key值
				let storageKey = fileMd5
				// 首先获取本地存储的数据，查询是否有对应文件路径，如果有缓存内容，直接返回
				const cacheFileInfo = uni.getStorageSync(storageKey)
				if (cacheFileInfo) {
					console.log("已缓存")
					return cacheFileInfo
				} else {
					console.log("未缓存,进行下载保存")
					// 如果没有，执行下载，并存储起来后
					uni.downloadFile({
						url: filePath,
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('下载成功', res);
								pathToBase64(res.tempFilePath)
									.then(base64 => {
										//console.log(base64)

										uni.setStorageSync(storageKey, base64)
										//console.log(uni.getStorage(storageKey))
									})
									.catch(error => {
										console.error("E1", error)
									})

								return filePath
								// 再进行本地保存
								// uni.saveFile({
								// 	tempFilePath: res.tempFilePath,
								// 	success: function(res2) {
								// 		pathToBase64(res2.savedFilePath)
								// 			.then(base64 => {
								// 				//console.log(base64)
								// 				uni.setStorageSync(storageKey, base64)
								// 			})
								// 			.catch(error => {
								// 				console.error("E1", error)
								// 			})
								// 		return uni.getStorageSync(storageKey)
								// 	},
								// 	fail: function(res2) {
								// 		console.log(res3.savedFilePath)
								// 		return filePath
								// 	}
								// })


							} else {
								console.log('下载临时文件失败')
								return filePath
							}
						},
						fail: (res) => {
							console.log("fail", res)
							return filePath
						}
					})

					return uni.getStorageSync(storageKey)
				}
			},

APP点此下载