快捷導(dǎo)航

uniapp自定義多列瀑布流組件項(xiàng)目實(shí)戰(zhàn)總結(jié)

更新時(shí)間：2023年09月20日 09:23:53 作者：MarkGuan

這篇文章主要為大家介紹了uniapp自定義多列瀑布流組件實(shí)戰(zhàn)總結(jié),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

導(dǎo)語(yǔ)

有時(shí)候展示圖片等內(nèi)容，會(huì)遇到圖片高度不一致的情況，這時(shí)候就不能使用等高雙列或多列展示了，這時(shí)候會(huì)用到瀑布流的頁(yè)面布局，下面就一起探討一下瀑布流的實(shí)現(xiàn)方法。

準(zhǔn)備工作

在pages/index文件夾下面新建一個(gè)waterfall.vue的組件；
按照前面文章所說(shuō)的頁(yè)面結(jié)構(gòu)，編寫好預(yù)定的瀑布流案例頁(yè)面；
在網(wǎng)上找?guī)讖埫赓M(fèi)的圖片素材；

原理分析

主要是根據(jù)圖片的高度自動(dòng)比較每列的總高度，根據(jù)uni.getImageInfo獲取到圖片高度，然后哪列低，就給哪列補(bǔ)充圖片，直至圖片列表循環(huán)完畢。

實(shí)戰(zhàn)演練

模板使用

下面就是循環(huán)列和圖片。

<view class="waterfall-page">
  <view
    class="waterfall-page-column"
    v-for="(item, index) in waterfall.columnList"
    :key="index"
    ref="column"
  >
    <view
      class="waterfall-page-item"
      v-for="(pItem, pIndex) in item"
      :key="pIndex"
    >
      <image class="waterfall-page-img" :src="pItem" mode="widthFix"></image>
    </view>
  </view>
</view>

樣式編寫

.waterfall-page {
  display: flex;
  align-items: flex-start;
  .waterfall-page-column {
    box-sizing: border-box;
    flex: 1;
    padding: 0 10rpx;
    width: 0;
    .waterfall-page-item {
      margin-bottom: 10rpx;
      .waterfall-page-img {
        display: inline-block;
        width: 100%;
      }
    }
  }
}

腳本使用

定義數(shù)據(jù)

// 瀑布流信息
const waterfall = reactive({
  // 圖片列表
  imgList: [
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-05.jpg",
    "/static/image/waterfall/pic-07.jpg",
    "/static/image/waterfall/pic-01.jpg",
    "/static/image/waterfall/pic-03.jpg",
    "/static/image/waterfall/pic-07.jpg",
  ],
  columnList: [], // 每列圖片
  columnHeight: [], // 每列圖片高度
  columnCount: 2, // 總列數(shù)
});

初始化數(shù)據(jù)

// 初始化數(shù)據(jù)
function initData() {
  for (var i = 0; i < waterfall.columnCount; i++) {
    waterfall.columnList.push([]);
    waterfall.columnHeight.push(0);
  }
}

計(jì)算方法

// 設(shè)置瀑布流布局
async function setWaterfallLayout() {
  for (var i = 0; i < waterfall.imgList.length; i++) {
    let item = waterfall.imgList[i];
    try {
      let imgInfo = await uni.getImageInfo({
          src: item,
        }),
        h = imgInfo.height;
      for (let j = 0; j < waterfall.columnCount - 1; j++) {
        let prevIndex = j,
          nextIndex = j + 1;
        if (
          waterfall.columnHeight[prevIndex] <= waterfall.columnHeight[nextIndex]
        ) {
          waterfall.columnList[prevIndex].push(item);
          waterfall.columnHeight[prevIndex] += h;
        } else {
          waterfall.columnList[nextIndex].push(item);
          waterfall.columnHeight[nextIndex] += h;
        }
      }
    } catch (error) {
      console.log(error);
    }
  }
}