uniapp自定义多列瀑布流组件项目实战总结
作者:MarkGuan
这篇文章主要为大家介绍了uniapp自定义多列瀑布流组件实战总结,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
导语
有时候展示图片等内容,会遇到图片高度不一致的情况,这时候就不能使用等高双列或多列展示了,这时候会用到瀑布流的页面布局,下面就一起探讨一下瀑布流的实现方法。
准备工作
- 在
pages/index
文件夹下面新建一个waterfall.vue
的组件; - 按照前面文章所说的页面结构,编写好预定的瀑布流案例页面;
- 在网上找几张免费的图片素材;
原理分析
主要是根据图片的高度自动比较每列的总高度,根据uni.getImageInfo
获取到图片高度,然后哪列低,就给哪列补充图片,直至图片列表循环完毕。
实战演练
模板使用
下面就是循环列和图片。
<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%; } } } }
脚本使用
- 定义数据
// 瀑布流信息 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, // 总列数 });
- 初始化数据
// 初始化数据 function initData() { for (var i = 0; i < waterfall.columnCount; i++) { waterfall.columnList.push([]); waterfall.columnHeight.push(0); } }
- 计算方法
// 设置瀑布流布局 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); } } }
案例展示
h5 端效果
小程序端效果
APP 端效果
以上就是uniapp自定义多列瀑布流组件实战总结的详细内容,更多关于uniapp多列瀑布流组件的资料请关注脚本之家其它相关文章!