[點晴模切ERP]uniapp瀑布流實現
|
admin
2023年7月25日 16:10
本文熱度 1346
|
簡要介紹：瀑布流布局是一種以流式展示內容的方式，使內容以類似瀑布流一樣的形式逐個排列，這種布局方式在網站中廣泛應用，特別是在圖片和商城類型上。 1. 圖片瀑布流：不依賴任何插件，復制即可見效： <template>
<view class="page">
<view class="left" ref="left">
<image class="image" v-for="(item,i) in leftList" :key="i" :src="item" mode="widthFix"></image>
</view>
<view class="right" ref="right">
<image class="image" v-for="(item,i) in rightList" :key="i" :src="item" mode="widthFix"></image>
</view>
</view>
</template>
<script>
export default {
data() {
return {
imageList: [
"https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
"https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
"https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
"https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
], //所有圖片
leftList: [], //左邊列圖片
rightList: [], //右邊列圖片
leftHeight: 0, //左邊列高度
rightHeight: 0, //右邊列高度
columnWidth: 0 //列寬度
}
},
mounted() {
this.$nextTick(() => {
uni.createselectorQuery().in(this).select('.left').boundingClientRect(res => {
this.columnWidth = res.width
//方法
this.setWaterFallLayout()
}).exec()
})
},
onReachBottom() {
console.log("觸底");
let newList = [
"https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
"https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
"https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
"https://img1.baidu.com/it/u=3311811998,3185175032&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625",
"https://img0.baidu.com/it/u=3319997766,4089593231&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
]
this.imageList.push(...newList)
console.log(this.imageList);
this.setWaterFallLayout();
},
methods: {
//通過uni.getImageInfo，小程序支持
async setWaterFallLayout() {
for (let item of this.imageList) {
try {
let h = await this.getImgHeight(item)
if (this.leftHeight <= this.rightHeight) {
this.leftList.push(item)
this.leftHeight += h
} else {
this.rightList.push(item)
this.rightHeight += h
}
} catch (e) {}
}
},
getImgHeight(url) {
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: url,
success: e => {
resolve(e.height)
},
fail: e => {
reject(e)
}
})
})
}
}
}
</script>
<style lang="scss">
.page {
width: 100%;
display: flex;
align-items: flex-start;
padding: 0 1%;
box-sizing: border-box;
}
.left,
.right {
margin: 0 auto;
width: 48%;
}
.image {
width: 100%;
height: auto;
margin-bottom: 10px;
}
.info{
width: 100%;
height: 200rpx;
background-color: #55aa7f;
}
</style> 運行效果：
2. 商品瀑布流：不依賴任何插件，復制即可見效： <template>
<view class="Index">
<!-- 瀑布流布局列表 -->
<view class="pubuBox">
<view class="pubuItem">
<view class="item-masonry" v-for="(item, index) in comList" :key="index">
<image :src="item.img" mode="widthFix"></image>
<view class="listtitle">
<!-- 這是沒有高度的父盒子（下半部分） -->
<view class="listtitle1">{{ item.name }}</view>
<view class="listtitle2">
<text class="listtitle2son">￥</text>
{{ item.commdityPrice }}
</view>
<view class="listtitle3">
某某某某旗艦店
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
comList: [{
img: "https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6",
name: '商品的名稱，可以很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長',
commdityPrice: 100
}, {
img: 'https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=d6764859a9740bb4aead7703daa61876',
name: '商品名稱會在超出兩行時候自動折疊',
commdityPrice: 100
},
{
img: 'https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=2e255208580c0570167a800344d3aa59',
name: '只有一行標題時高度為39',
commdityPrice: 100
}, {
img: 'https://img0.baidu.com/it/u=2627496060,1933351908&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=fd7a89ad586d338543b6916df7083e4f',
name: '具體樣式您可以自定義',
commdityPrice: 100
}, {
img: 'https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1689958800&t=210689b7eb06d7c78958d7063151cba6',
name: 'vue的H5頁面也是如此使用',
commdityPrice: 100
}
], //商品列表
};
},
onShow() {},
onLoad() {},
methods: {},
// 觸底加載下一頁 換成真實的請求到的數據
onReachBottom() {
console.log("觸底");
// 模擬的請求數據
let newList = [
{
img: "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
name: '具體樣式您可以自定義',
commdityPrice: 100
}, {
img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
name: '具體樣式您可以自定義',
commdityPrice: 100
}, {
img: "https://img1.baidu.com/it/u=833730514,666835&fm=253&fmt=auto&app=138&f=JPEG?w=355&h=500",
name: '具體樣式您可以自定義',
commdityPrice: 100
}, {
img: "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
name: '具體樣式您可以自定義',
commdityPrice: 100
},
]
this.comList.push(...newList)
console.log(this.comList);
},
};
</script>
<style scoped="scoped" lang="scss">
//瀑布流
page {
background-color: #eee;
height: 100%;
}
.pubuBox {
padding: 22rpx;
}
.pubuItem {
column-count: 2;
column-gap: 20rpx;
}
.item-masonry {
box-sizing: border-box;
border-radius: 15rpx;
overflow: hidden;
background-color: #fff;
break-inside: avoid;
/*避免在元素內部插入分頁符*/
box-sizing: border-box;
margin-bottom: 20rpx;
box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);
}
.item-masonry image {
width: 100%;
}
.listtitle {
padding-left: 22rpx;
font-size: 24rpx;
padding-bottom: 22rpx;
.listtitle1 {
line-height: 39rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
min-height: 39rpx;
max-height: 78rpx;
}
.listtitle2 {
color: #ff0000;
font-size: 32rpx;
line-height: 32rpx;
font-weight: bold;
padding-top: 22rpx;
.listtitle2son {
font-size: 32rpx;
}
}
.listtitle3 {
font-size: 28rpx;
color: #909399;
line-height: 32rpx;
padding-top: 22rpx;
}
}
.Index {
width: 100%;
height: 100%;
}
</style> 運行效果：
瀑布流的一些要點：布局結構：Web瀑布流布局通過動態加載和排列內容，使得頁面更加有吸引力和互動性。它使用CSS和Javascript來實現自適應布局，確保在不同尺寸的屏幕上都能達到最佳效果。 圖片加載：在Web瀑布流中，圖片通常是主要的內容元素。為了加快頁面加載速度，常常使用延遲加載技術，即只在用戶滾動到可見區域時才加載圖片。這種方法可以有效減少頁面加載時間。 動態排列：Web瀑布流通過Javascript實現了動態排列內容的功能。它根據內容的高度和寬度等因素來決定每個內容塊的位置，以使得頁面整體看起來更加美觀。需要注意的是，動態排列需要通過計算和調整來確保內容塊不會重疊或出現缺口。 響應式設計：Web瀑布流布局在不同設備上都能夠適應，包括桌面、平板和移動設備。采用響應式設計可以根據屏幕尺寸和方向來動態調整內容的排列和展示方式，提供更好的用戶體驗。
點晴模切ERP更多信息：http://moqie.clicksun.cn，聯系電話：4001861886
該文章在 2023/7/25 16:15:21 編輯過
|
|
400 186 1886
