uni-app瀑布流效果實(shí)現(xiàn)方法
更新時(shí)間：2023年12月07日 16:34:54 作者：青田。
Uni-app是一個(gè)基于Vue.js開(kāi)發(fā)跨平臺(tái)應(yīng)用的框架,它可以將代碼編譯成多個(gè)平臺(tái)下的原生應(yīng)用,這篇文章主要給大家介紹了關(guān)于uni-app瀑布流效果的相關(guān)資料,需要的朋友可以參考下
效果圖
一、組件
components/u-myWaterfall.vue
<template>
<view class="u-waterfall">
<view id="u-left-column" class="u-column"><slot name="left" :leftList="leftList"></slot></view>
<view id="u-right-column" class="u-column"><slot name="right" :rightList="rightList"></slot></view>
</view>
</template>
<script>
export default {
props: {
value: {
// 瀑布流數(shù)據(jù)
type: Array,
required: true,
default: function() {
return [];
}
},
// 每次向結(jié)構(gòu)插入數(shù)據(jù)的時(shí)間間隔，間隔越長(zhǎng)，越能保證兩列高度相近，但是對(duì)用戶體驗(yàn)越不好
// 單位ms
addTime: {
type: [Number, String],
default: 200
},
// id值，用于清除某一條數(shù)據(jù)時(shí)，根據(jù)此idKey名稱找到并移除，如數(shù)據(jù)為{idx: 22, name: 'lisa'}
// 那么該把idKey設(shè)置為idx
idKey: {
type: String,
default: 'id'
}
},
data() {
return {
leftList: [],
rightList: [],
tempList: [],
}
},
watch: {
copyFlowList(nVal, oVal) {
// 取差值，即這一次數(shù)組變化新增的部分
let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
// 拼接上原有數(shù)據(jù)
this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
this.splitData();
}
},
mounted() {
this.tempList = this.cloneData(this.copyFlowList);
this.splitData();
},
computed: {
// 破壞flowList變量的引用，否則watch的結(jié)果新舊值是一樣的
copyFlowList() {
return this.cloneData(this.value);
}
},
methods: {
async splitData() {
if (!this.tempList.length) return;
let leftRect = await this.$uGetRect('#u-left-column');
let rightRect = await this.$uGetRect('#u-right-column');
// 如果左邊小于或等于右邊，就添加到左邊，否則添加到右邊
let item = this.tempList[0];
// 解決多次快速上拉后，可能數(shù)據(jù)會(huì)亂的問(wèn)題，因?yàn)榻?jīng)過(guò)上面的兩個(gè)await節(jié)點(diǎn)查詢阻塞一定時(shí)間，加上后面的定時(shí)器干擾
// 數(shù)組可能變成[]，導(dǎo)致此item值可能為undefined
if(!item) return ;
if (leftRect.height < rightRect.height) {
this.leftList.push(item);
} else if (leftRect.height > rightRect.height) {
this.rightList.push(item);
} else {
// 這里是為了保證第一和第二張?zhí)砑訒r(shí)，左右都能有內(nèi)容
// 因?yàn)樘砑拥谝粡?，?shí)際隊(duì)列的高度可能還是0，這時(shí)需要根據(jù)隊(duì)列元素長(zhǎng)度判斷下一個(gè)該放哪邊
if (this.leftList.length <= this.rightList.length) {
this.leftList.push(item);
} else {
this.rightList.push(item);
}
}
// 移除臨時(shí)列表的第一項(xiàng)
this.tempList.splice(0, 1);
// 如果臨時(shí)數(shù)組還有數(shù)據(jù)，繼續(xù)循環(huán)
if (this.tempList.length) {
setTimeout(() => {
this.splitData();
}, this.addTime)
}
},
// 復(fù)制而不是引用對(duì)象和數(shù)組
cloneData(data) {
return JSON.parse(JSON.stringify(data));
}
}
}
</script>
<style lang="scss" scoped>
.u-waterfall {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.u-column {
display: flex;
flex: 1;
flex-direction: column;
height: auto;
}
.u-image {
width: 100%;
}
</style>
二、商品的組件
<template>
<view>
<view class="waterfall-box" v-for="(item, index) in list" :key="index">
<u-image :src="item.image" :lazy-load="true" radius="10" width="160" height="160"></u-image>
<view class="box-item-title">
{{item.title}}
</view>
<view class="box-item-price">
{{item.price}}元
</view>
<view class="box-item-tag">
<view class="tag-owner">
自營(yíng)
</view>
<view class="tag-text">
放心購(gòu)
</view>
</view>
<view class="box-comment">
{{item.shop}}
</view>
</view>
</view>
</template>
<script>
export default {
name:"MyGoodsDemo",
props:{
list:{
type:Array,
default:[]
}
},
data() {
return {
};
}
}
</script>
<style lang="scss">
.waterfall-box {
border-radius: 16rpx;
margin: 10rpx;
background-color: #ffffff;
padding: 16rpx;
position: relative;
.box-item-title{
width: 320rpx;
font-size: 26rpx;
margin-top: 10rpx;
color: #434343;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.box-item-price{
font-size: 30rpx;
color:#ff4142;
margin-top: 10rpx;
}
.box-item-tag{
display: flex;
margin-top: 10rpx;
.tag-owner{
background-color:#FF4142;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 16rpx;
line-height: 1;
}
.tag-text {
border: 1px solid #FF4142;
color: #FF4142;
margin-left: 20rpx;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
font-size: 20rpx;
}
}
.box-comment{
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
}
</style>
三、頁(yè)面的使用
<template>
<view class="my-waterfall">
<myWaterfall v-model="flowList">
<template v-slot:left="{leftList}">
<MyGoodsDemo :list="leftList"></MyGoodsDemo>
</template>
<template v-slot:right="{rightList}">
<MyGoodsDemo :list="rightList"></MyGoodsDemo>
</template>
</myWaterfall>
<!-- 加載更多 -->
<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
</view>
</template>
<script>
import myWaterfall from '@/components/u-myWaterfall.vue'
import MyGoodsDemo from '@/components/MyGoodsDemo.vue'
export default {
components:{
myWaterfall,
MyGoodsDemo
},
data() {
return {
loadStatus: 'loadmore',
flowList: [],
list: [
{
price: 35,
title: 'CINESSD 小白男鞋2022新款冬季運(yùn)動(dòng)休閑板鞋男士皮面防水低幫百 白蘭 39',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/43390/15/19929/131606/6370b921Eefed6acc/8e9780a1736357e6.jpg!q70.dpg.webp',
},
{
price: 75,
title: '海天 調(diào)味組合醬油蠔油料酒金標(biāo)生抽*2+蠔油+古道料酒省心禮盒錦鯉派',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/208109/6/29643/155027/63ec3d92F817bd559/90a96c4dd880e40f.jpg!q70.dpg.webp',
},
{
price: 385,
title: '閃魔 蘋果14手機(jī)殼 iphone14ProMax氣囊防摔超薄保護(hù)套鏡頭全包透明軟殼 蘋果14Pro【十米防摔^透出裸機(jī)】全透明',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/5972/32/17361/80842/626deb75E66225786/e7f1ff06504a1cca.jpg!q70.dpg.webp',
},
{
price: 784,
title: '小米R(shí)edmi Buds3青春版 真無(wú)線藍(lán)牙耳機(jī) 入耳式耳機(jī) 藍(lán)牙耳機(jī) 小米無(wú)線耳機(jī) 藍(lán)牙5.2 蘋果華為手機(jī)通用',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/97453/11/35123/120822/63eb4ec8F554a9a71/5c0332fa1b04d502.jpg!q70.dpg.webp',
},
{
price: 7891,
title: '海爾（Haier）大容量囤貨海爾（Haier）冰箱京東小家雙開(kāi)門冰箱532升電冰箱一級(jí)變頻大超薄家用冰箱風(fēng)冷無(wú)霜 BCD-532WGHSS8EL9U1',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/97453/11/35123/120822/63eb4ec8F554a9a71/5c0332fa1b04d502.jpg!q70.dpg.webp',
},
{
price: 2341,
title: '衛(wèi)龍魔芋爽辣條休閑零食香辣素毛肚180g/袋約12小包即食小零食',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/97453/11/35123/120822/63eb4ec8F554a9a71/5c0332fa1b04d502.jpg!q70.dpg.webp',
},
{
price: 661,
shop: '500+條評(píng)論',
title: '衛(wèi)龍魔芋爽辣條休閑零食香辣素毛肚180g/袋約12小包即食小零食',
image: 'https://img13.360buyimg.com/n2/s370x370_jfs/t1/51330/4/17889/64744/63ca2564F4cfd8ce3/a9ed18603e2855f8.jpg!q70.jpg.webp',
},
{
price: 1654,
title: '鞋子鞋子鞋子',
shop: '500+條評(píng)論',
image: 'https://img10.360buyimg.com/n2/s370x370_jfs/t1/195846/4/32797/40099/63e348fbF14993564/472de8ed0c40f206.jpg!q70.jpg',
},
{
price: 1678,
title: '優(yōu)資萊（UZERO） 優(yōu)資萊綠茶保濕禮盒潔面乳爽膚水乳液精華套裝補(bǔ)水護(hù)膚品女 八件套禮盒',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/200469/24/30778/90107/63989b02E6f47594f/cb91265ba594e7cb.jpg!q70.dpg.webp',
},
{
price: 924,
title: '蘭蔻小黑瓶50ml 修護(hù)保濕',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/160110/20/21070/176153/63eb2b42F599b4cb6/f466a798d5f63d83.jpg!q70.dpg.webp',
},
{
price: 8243,
title: '至本特安修護(hù)套裝 2件套（肌底液+乳液）',
shop: '500+條評(píng)論',
image: 'https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/54121/6/21408/129268/631593a7E87b6d12a/b3c650bf886c6a5f.jpg!q70.dpg.webp',
},
]
}
},
onLoad() {
this.addRandomData();
},
onReachBottom() {
this.loadStatus = 'loading';
// 模擬數(shù)據(jù)加載
setTimeout(() => {
this.addRandomData();
this.loadStatus = 'loadmore';
}, 1000)
},
methods: {
addRandomData() {
for(let i = 0; i < 10; i++) {
let index = this.$u.random(0, this.list.length - 1);
// 先轉(zhuǎn)成字符串再轉(zhuǎn)成對(duì)象，避免數(shù)組對(duì)象引用導(dǎo)致數(shù)據(jù)混亂
let item = JSON.parse(JSON.stringify(this.list[index]))
console.log(item);
item.id = this.$u.guid();
this.flowList.push(item);
}
},
}
}
</script>
<style>
page {
background-color: rgb(240, 240, 240);
}
</style>
<style lang="scss" scoped>
.my-waterfall{
width: 750rpx;
.waterfall-box {
border-radius: 16rpx;
margin: 10rpx;
background-color: #ffffff;
padding: 16rpx;
position: relative;
.box-item-title{
width: 320rpx;
font-size: 26rpx;
margin-top: 10rpx;
color: #434343;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.box-item-price{
font-size: 30rpx;
color:#ff4142;
margin-top: 10rpx;
}
.box-item-tag{
display: flex;
margin-top: 10rpx;
.tag-owner{
background-color:#FF4142;
color: #FFFFFF;
display: flex;
align-items: center;
padding: 4rpx 14rpx;
border-radius: 50rpx;
font-size: 16rpx;
line-height: 1;
}
.tag-text {
border: 1px solid #FF4142;
color: #FF4142;
margin-left: 20rpx;
border-radius: 50rpx;
line-height: 1;
padding: 4rpx 14rpx;
display: flex;
align-items: center;
font-size: 20rpx;
}
}
.box-comment{
font-size: 22rpx;
color: $u-tips-color;
margin-top: 5px;
}
}
}
</style>總結(jié)
到此這篇關(guān)于uni-app瀑布流效果實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)uni-app瀑布流內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了小程序開(kāi)發(fā)之模態(tài)框組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-04-04
ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用示例
這篇文章主要介紹了ES6知識(shí)點(diǎn)整理之函數(shù)數(shù)組參數(shù)的默認(rèn)值及其解構(gòu)應(yīng)用,結(jié)合實(shí)例形式分析了ES6函數(shù)數(shù)組參數(shù)解構(gòu)賦值和默認(rèn)值的設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-04-04
這篇文章主要為大家介紹了javaScript中FormData使用方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
VS2008中使用JavaScript調(diào)用WebServices
這篇文章主要介紹了VS2008中使用JavaScript調(diào)用WebServices,需要的朋友可以參考下2014-12-12
javascript自適應(yīng)寬度的瀑布流實(shí)現(xiàn)思路
這里主要介紹瀑布流的一種實(shí)現(xiàn)方法：絕對(duì)定位(css)+javascript+ajax+json。簡(jiǎn)單一點(diǎn)如果不做滾動(dòng)加載的話就是絕對(duì)定位(css)+javascript了，ajax和json是滾動(dòng)加載更多內(nèi)容的時(shí)候用到的，感興趣的你可以參考下哦2013-02-02
JS無(wú)限極樹(shù)形菜單,json格式、數(shù)組格式通用示例
本文為大家介紹下JS無(wú)級(jí)樹(shù)形菜單的實(shí)現(xiàn)，修改了一下數(shù)據(jù)格式，是json和數(shù)組或者混合型的數(shù)據(jù)都通用，不用特定key等，想學(xué)習(xí)的朋友可以參考下2013-07-07
這篇文章主要介紹了JavaScript對(duì)象原型鏈原理詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
js中toString()和String()區(qū)別詳解
本文主要介紹了js中toSring()和Sring()的區(qū)別。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript實(shí)現(xiàn)飛舞的泡泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)飛舞的泡泡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關(guān)于JavaScript中事件與異常捕獲的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02