uniapp瀑布列表

uniapp瀑布列表我看了下好像没什么好用的插件,或者都是一些计算麻烦的,还有就是样式做的定位不太好分页。所以自己写了一个,比较简单,支持做分页。设定几列,我就添加几个数组,然后给高度最短的列push数据。最核心的代码也就那么几行,反正挺简单,代码里都有注释,直接整个粘贴过去看效果

javascript 复制代码
<template>
  <view class="list">
    <view class="list-column" v-for="(item, index) in list" :key="index">
      <!-- 这个盒子一定要,计算每列总高度的 -->
      <view :class="'column' + index">
        <view class="detail" v-for="(item1, i) in item" :key="i">
          <image :src="item1.img"></image>
          <view>{{ item1.title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      column: 3, //列数需大于0,可随意切换
      list: [], //数据列表
      heightList: [], //保存每列的高度
      timer: null, //定时器需要延时获取dom高度
    };
  },
  async onLoad() {
    await this.getColumnList();
    await this.getList();
  },
  onUnload() {
    clearInterval(this.timer);
  },
  onReachBottom() {
	// 分页逻辑按照自己需求写
	this.getList()
  },
  methods: {
    // 初始化数组的列数,添加空数组
    getColumnList() {
      this.list = [];
      for (let i = 0; i < this.column; i++) {
        this.list.push([]);
      }
    },
    // 获取接口数据
    getList() {
      // 假如这里是接口获取的数组
      let data = [
        {
          img: "https://t8.baidu.com/it/u=3272525572,1712724531&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=B39CA76E7560451B980B337E0300D07C&sec=1729184400&t=de3a34366e8f44e2c1544e1bd92f1474",
          title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
        },
        {
          img: "https://t8.baidu.com/it/u=3897666234,2873419740&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=AE62C214FE226B03460E5FD80300B0BF&sec=1729184400&t=0baba2ab4af4b3a863f311d5cbf8895f",
          title: "标题题标题",
        },
        {
          img: "https://t7.baidu.com/it/u=3257192411,2459472063&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=24AC60B4DC422ED626181D09030060D3&sec=1729184400&t=ce9d5b84064de942e7144fcce84a177a",
          title: "标标题标标题标标题标标题",
        },
        {
          img: "https://t7.baidu.com/it/u=3562468818,2226789446&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=40125F98770451E74A04DC50030070F1&sec=1729184400&t=8d26ee442dab4e4e29706cbb972d1ef3",
          title: "标题标题标题题标题标题标题标题标题",
        },
        {
          img: "https://t9.baidu.com/it/u=3270408099,2255924736&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=73BF27660F80496242CFE37B0300E07A&sec=1729184400&t=198738e9dda29c2d3024af117802a080",
          title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
        },
        {
          img: "https://t9.baidu.com/it/u=922375208,550964998&fm=3031&app=3031&size=f242,150&n=0&f=JPEG&fmt=auto?s=E192EF3E8BCF444B5AD7C0C7020020BB&sec=1729184400&t=caa743d6e8acac9462dee574cd8239a1",
          title: "标题标题标题标题标题标题标题标题",
        },
        {
          img: "https://t8.baidu.com/it/u=3272525572,1712724531&fm=3035&app=3035&size=f242,150&n=0&f=JPEG&fmt=auto?s=B39CA76E7560451B980B337E0300D07C&sec=1729184400&t=de3a34366e8f44e2c1544e1bd92f1474",
          title: "标题标题标题标题标题标题标题标题标题标题标题标题标题标题",
        },
        {
          img: "https://t8.baidu.com/it/u=3897666234,2873419740&fm=217&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=AE62C214FE226B03460E5FD80300B0BF&sec=1729184400&t=0baba2ab4af4b3a863f311d5cbf8895f",
          title: "标题题标题标题标题标题",
        }
      ];
      //接口拿到数据后开始逐步渲染
      if (data && data.length) {
        for (let i = 0; i < data.length; i++) {
          this.timer = setTimeout(() => {
            this.getDom(data[i]); //将单个数据添加到各个列中
          }, i * 20); //这个20毫秒延迟可以改大看尾部添加的效果
        }
      }
    },
    // 获取哪一列的高度最小
    getDom(i) {
      this.heightList = [];
      const query = uni.createSelectorQuery().in(this);
      this.list.forEach((i, index) => {
        query
          .select(`.column${index}`)
          .boundingClientRect((data) => {
            this.heightList.push({ index, height: data.height }); //获取每一列dom的高度
            this.heightList = Array.from(
              new Set(this.heightList.map(JSON.stringify))
            ).map(JSON.parse);
          })
          .exec();
      });
      let min = Math.min(...this.heightList.map((obj) => obj.height)); //几列中对比哪个最小
      let minValue = this.heightList.findIndex((j) => j.height == min);
      this.list[minValue].push(i); //将列高度最小的,添加单条数据到对应的数组
    }
  }
};
</script>

<style>
.list {
  display: flex;
  padding: 32rpx;
}
.list-column {
  flex: 1;
  margin-right: 32rpx;
}
.list-column:last-child {
  margin-right: 0;
}
.detail {
  margin-bottom: 32rpx;
}
.detail image {
  width: 100%;
}
</style>

总结:就是获取dom比较大小,然后获取dom需要一点点的延迟。要是vue的项目可以改改获取dom高度的方法应该就可以使用了

相关推荐
游戏开发爱好者86 分钟前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
shykevin9 小时前
uni-app x导航区域跳转
windows·uni-app
2501_915106329 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者89 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview
2501_9159214311 小时前
掌握 iOS 26 App 性能监控,从监测到优化的多工具组合流程
android·macos·ios·小程序·uni-app·cocoa·iphone
勉灬之11 小时前
通过npm run XXX命令生成uniapp的pages.json文件
npm·uni-app·json
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通, uni-app常用API的详细语法知识点(上)(5)
前端·javascript·vue.js·学习·微信小程序·小程序·uni-app
2501_9160088913 小时前
手机 iOS 系统全解析,生态优势、开发机制与跨平台应用上架实践指南
android·ios·智能手机·小程序·uni-app·iphone·webview
00后程序员张15 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_9160088915 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos