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】,欢迎大家订阅,我会同步文章到公众号上。