代码片段：
<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>
图片缓存策略
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项目预览，下载
https://liufu4635.oss-cn-guangzhou.aliyuncs.com/zhenaipaoche.apk
