微信小程序卡片布局怎么做?

　　微信小程序卡片布局怎么做?微信小程序自上线以来，火热程度一直持续着，各种方便用户的功能也在不断的更新中，很多人都看到了里面的前景。一个小程序的优劣可以从小程序卡片布局上面看出来。那么微信小程序卡片布局怎么做才会符合大众口味呢?下面随小编一起来了解。

　　微信小程序卡片布局怎么做?

　　这里小编以瀑布流布局告诉大家微信小程序卡片布局怎么做。瀑布流布局是一种比较流行的页面布局方式，每个卡片的高度不都一样，形成一种参差不齐的美感。在微信小程序中，我们也可以做出这样的效果，不过由于小程序框架的一些特*，在实现思路上还是有一些差别的。

　　下面我们看一下如何实现瀑布流布局。

　　我们要实现的是一个固定2列的布局，然后将图片数据动态加载进这两列中(而加载进来的图片，会根据图片实际的尺寸，来决定到底是放在左列还是右列中)。

　　我们知道，在小程序HTML中，我们要动态加载图片的话，通常会使用new Image()创建一个图片对象，然后通过它来动态加载一个url指向的图片，并获取图片的实际尺寸等信息。而在小程序框架中，并没有提供相应的小程序JS对象来处理图片加载。其实我们可以借助小程序wxml中的小程序组件来完成这样的功能，虽然有点绕，但还是能满足我们的功能要求的。

　　我们可以在Page中通过数据绑定，来传递要加载的图片信息到wxml中，让组件去加载图片资源，然后当图片加载完成的时候，通过bindload指定的事件处理函数来做进一步处理。

　　我们来看一下Page文件中定义的onImageLoad函数。在其中，我们可以从传入的事件对象e上，获取到组件的丰富信息，包括通过它加载进来的图片的实际大小。然后我们将图片按照页面上实际需要显示的尺寸，计算出同比例缩放后的尺寸。接着，我们可以根据左右两列目前累积的内容高度，来决定把当前加载进来的图片放到哪一边。

　　这里是显示在两列图片的wxml代码，我们可以看到在组件上，我们通过使用bindscrolltolower设置了事件监听函数，当滚动到底部的时候，会触发loadImages去再加载下一组的图片数据，这样就形成了无限的加载：

　　以上就是小编给大家收集的微信小程序卡片布局怎么做的全部内容了，主流的UI设计一般都会符合大众的口味，所以，想要吸引更多的用户，不妨从小程序卡片设计入手。想知道更多精彩内容，可以来微小乔哦。

相关推荐：

小程序动态卡片怎么实现？

小程序怎么添加推文?

小程序路径动画怎么做?