uniapp微信小程序使用瀑布流结合z-panging组件显示pexels的图片

最终效果如下：

瀑布流组件用的：https://ext.dcloud.net.cn/plugin?id=7594

下拉刷新组件用的：https://z-paging.zxlee.cn

这两个搭配起来省了很多事

z-paging中组合custom-waterfalls-flow，可下拉刷新、到底自动加载下一页。

下拉刷新效果：

到底自动加载下一页效果：

因为是瀑布流，所以两边会自动补位，不用担心那边缺了。

可以一直无限加载。

我这边的html代码结构如下：

<z-paging :fixed="false" :show-empty-view-reload="true" ref="paging" v-model="img_urls"

@query="load_pexels_images" :default-page-size="page_size"

:loading-more-enabled="loading_more_enabled"

:to-bottom-loading-more-enabled="to_bottom_loading_more_enabled"

:loading-more-title-custom-style="{'background-color': '#F8F8F8'}">

  <view class="pd-10">

    <custom-waterfalls-flow :value="img_urls" @imageClick="imageClick" @loaded="loaded">

      <view class="pd-5" v-for="(item,index) in img_urls" :key="index" slot="slot{{index}}">

        <view class="title">

        	<u-parse :content="item.title" :selectable="true"></u-parse>

        </view>

      </view>

    </custom-waterfalls-flow>

  </view>

</z-paging>

z-paging组件可配置的字段挺多的，完全可以满足下拉刷新的需求了，大家可以尝试下。

我这里的图片都是请求pexels.com的接口拿到的，具体API文档可以参考：https://www.pexels.com/zh-cn/api/documentation/#photos-search

需要申请一个授权就行，但是有些限制，API的速率限制为每小时200个请求和每月 20000个请求。：

感觉我的小程序还完全不能达到这个限制，可以在请求头中查看用了多少：

看下我的：

当月总数25000次请求，还有24703次。用不完，完全永不忘。

关于如何请求pexels.com，可以看下我之前的文章：微信小程序使用微信云托管添加自定义域名并转发到pexels.com

这篇分享文章就到这里啦！如果你对文章内容有疑问或想要深入讨论，欢迎在评论区留言，我会尽力回答。同时，如果你觉得这篇文章对你有帮助，不妨点个赞并分享给其他同学，让更多人受益。

想要了解更多相关知识，可以查看我以往的文章，其中有许多精彩内容。记得关注我，获取及时更新，我们可以一起学习、讨论技术，共同进步。

感谢你的阅读与支持，期待在未来的文章中与你再次相遇！

我的微信公众号：【xdub】，欢迎大家订阅，我会同步文章到公众号上。