手机导航列表页面瀑布流图片无限加载代码_「实战」uni-App手撸瀑布流+列表无限加载...

一、简介瀑布流+列表无限加载

瀑布流

瀑布流是很常见的一种布局方式，像一些图片展示网站，购物网站中最为常见。瀑布流将显示区域划分为固定宽度的几栏。可以保持一致的图片或者div展示区域的宽度，自适应其高度，显示元素的顺序从左到右，自上而下排列。显示效果极好，空间利用率高。

列表无限加载

列表无限加载：当滚轮scroll滑到页面的底部，自动触发新的页面请求，加载更多的显示元素，省去了用户的翻页操作，这在各种APP中极为常见，用户体验极佳。

二、实现逻辑

本例中采用两栏瀑布流布局，分别用数组cardListLeft和cardListRight储存左右两栏要显示的card(card表示显示的元素)，cardLeftHeight 和cardRightHeight表示左右两栏的高度；

每加载一张card，要进行自适应处理，计算显示的高度，然后把card加到栏高更低的一栏中，更新这一栏的高度；

初始化时，加载4张card，并设置content的高度为客户端屏幕的高度，以实现触底加载更多。

加载更多方法loadMore触发时，触发新的请求，获取接下来的四张card。以此直到

没有更多card，就显示noMore。

三、主要知识点

底部触发加载更多

使用uni-App的组件

动态绑定的 style 不支持直接使用 upx。要使用 uni.upx2px(Number) 转换为 px 后再赋值。

获取图片的原始高度

使用组件的@load方法，当图片载入完毕时，发布到 AppService 的事件名，事件对象event.detail = {height:‘图片高度px’, width:‘图片宽度px’}

function(e){ let oImgW = e.detail.width; //图片原始宽度 let oImgH = e.detail.height; //图片原始高度}

四、代码实现

{{item.cardTitle}}

{{item.cardText}}

{{item.cardTitle}}

{{item.cardText}}

我也是有底线的！！！