代碼片段：
<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頁(yè)面的下拉加載 -->
<!-- #ifdef APP-NVUE -->
<refreshBox @refresh="refresh" :loading="loading"></refreshBox>
<!-- #endif -->
<view class="page">
<WaterfallsFlow :wfList='data' @itemTap="itemTap" />
</view>
<!-- 加載狀態(tài)：上拉加載更多，加載中，沒(méi)有更多數(shù)據(jù)了，加載錯(cuò)誤 -->
<!-- #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,? ? ? ? ? // 列表標(biāo)記
? ? ? ? ? ? boxHeight: [],? ? // 下標(biāo)0和1分別為左列和右列高度
? ? ? ? };
? ? },
? ? watch: {
? ? ? ? // 監(jiān)聽(tīng)列表數(shù)據(jù)變化
? ? ? ? wfList() {
? ? ? ? ? ? // 如果數(shù)據(jù)為空或新的列表數(shù)據(jù)少于舊的列表數(shù)據(jù)（通常為下拉刷新或切換排序或使用篩選器），初始化變量
? ? ? ? ? ? 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;
? ? ? ? ? ? }
? ? ? ? ? ? // 如果列表有值，調(diào)用waterfall方法
? ? ? ? ? ? if (this.wfList.length) {
? ? ? ? ? ? ? ? this.allList = this.wfList;
? ? ? ? ? ? ? ? this.waterFall()
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // 監(jiān)聽(tīng)標(biāo)記，當(dāng)標(biāo)記發(fā)生變化，則執(zhí)行下一個(gè)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) {
? ? ? ? ? ? ? ? // 初始化，從左邊開(kāi)始插入
? ? ? ? ? ? ? ? this.leftList.push(this.allList[i]);
? ? ? ? ? ? ? ? // 更新左邊列表高度
? ? ? ? ? ? ? ? this.getViewHeight(0);
? ? ? ? ? ? } else if (i === 1) {
? ? ? ? ? ? ? ? // 第二個(gè)item插入，默認(rèn)為右邊插入
? ? ? ? ? ? ? ? this.rightList.push(this.allList[i]);
? ? ? ? ? ? ? ? // 更新右邊列表高度
? ? ? ? ? ? ? ? this.getViewHeight(1);
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // 根據(jù)左右列表高度判斷下一個(gè)item應(yīng)該插入哪邊
? ? ? ? ? ? ? ? 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，確保頁(yè)面更新結(jié)束后，再請(qǐng)求高度
? ? ? ? ? ? this.$nextTick(() => {
? ? ? ? ? ? ? ? query.select(id).boundingClientRect(res => {
? ? ? ? ? ? ? ? ? ? res ? this.boxHeight[leftOrRight] = res.height : '';
? ? ? ? ? ? ? ? ? ? this.mark = this.mark + 1;
? ? ? ? ? ? ? ? }).exec();
? ? ? ? ? ? })
? ? ? ? },
? ? ? ? // item點(diǎn)擊
? ? ? ? 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
// 首先獲取本地存儲(chǔ)的數(shù)據(jù)，查詢(xún)是否有對(duì)應(yīng)文件路徑，如果有緩存內(nèi)容，直接返回
const cacheFileInfo = uni.getStorageSync(storageKey)
if (cacheFileInfo) {
console.log("已緩存")
return cacheFileInfo
} else {
console.log("未緩存,進(jìn)行下載保存")
// 如果沒(méi)有，執(zhí)行下載，并存儲(chǔ)起來(lái)后
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
// 再進(jìn)行本地保存
// 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('下載臨時(shí)文件失敗')
return filePath
}
},
fail: (res) => {
console.log("fail", res)
return filePath
}
})
return uni.getStorageSync(storageKey)
}
},
app項(xiàng)目預(yù)覽，下載
https://liufu4635.oss-cn-guangzhou.aliyuncs.com/zhenaipaoche.apk
