uni-App手撸瀑布流+列表无限加载

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

瀑布流

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

列表无限加载

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

实现逻辑：

本例中采用两栏瀑布流布局，分别用数组cardListLeft和cardListRight储存左右两栏要显示的card（card表示显示的元素），cardLeftHeight 和cardRightHeight表示左右两栏的高度；
每加载一张card，要进行自适应处理，计算显示的高度，然后把card加到栏高更低的一栏中，更新这一栏的高度；
初始化时，加载4张card，并设置content的高度为客户端屏幕的高度，以实现触底加载更多。
加载更多方法loadMore触发时，触发新的请求，获取接下来的四张card。以此直到
没有更多card，就显示noMore。

主要知识点：

底部触发加载更多

使用uni-App的组件

<scroll-view class="content" v-bind:style="{height:contentH+'px'}" scroll-y="true" @scrolltolower="loadMore" lower-threshold="10">

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

<!-- - 静态upx赋值生效 -->
<view class="test" style="width:200upx"></view>
<!-- - 动态绑定不生效 -->
<view class="test" :style="{
      
      width:winWidth + 'upx;'}"></view>

获取图片的原始高度

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

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

代码实现：

<scroll-view class="content" v-bind:style="{
      
      height:contentH+'px'}" scroll-y="true" @scrolltolower="loadMore" lower-threshold="10">
	<!--瀑布流布局start-->
	<view class="new-list">
		<view class="list-left">
			<view class="card" v-for="(item,index) in cardListLeft">
				<img :src="item.cardImg" alt="