写一个微信小程序瀑布流

我不是女神ヾ 2023-01-12 01:48 172阅读 0赞

两列布局瀑布流

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l6aHVvbw_size_16_color_FFFFFF_t_70][]

参考 [https://github.com/ivanYF/minapp][https_github.com_ivanYF_minapp]

瀑布流 操作，未知图片比例的前提下，loading图片，分析宽高 放入正确的view轨道 end

· 关键的一句话“未知的图片比例”，刚好遇到的就是这样的情况，微信小程序下有 [wx.getImageInfo()][wx.getImageInfo] 这个方法，解析图片得到高度，再判断各列长度是否达到阈值，放入高度较小的那一列.

[wx.getImageInfo()][wx.getImageInfo] 是异步函数，参考以下链接才发现，使用递归解决。

[https://developers.weixin.qq.com/community/develop/doc/000606ccd70630b3a4478156a56800][https_developers.weixin.qq.com_community_develop_doc_000606ccd70630b3a4478156a56800]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2l6aHVvbw_size_16_color_FFFFFF_t_70]: /images/20221119/4d69b63715e044ab9aa58b35099f9b95.png
[https_github.com_ivanYF_minapp]: https://github.com/ivanYF/minapp
[wx.getImageInfo]: https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.getImageInfo.html
[https_developers.weixin.qq.com_community_develop_doc_000606ccd70630b3a4478156a56800]: https://developers.weixin.qq.com/community/develop/doc/000606ccd70630b3a4478156a56800

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序之微信小程序中跳转另一个微信小程序

信为了不让小程序成为孤岛，提供了从一个微信小程序跳转到另一个微信小程序的功能，这个功能也是经过了很多波折，方式也不断改变，所以导致很多小伙伴在网上找到的博文都不能正确解决...

左手的ㄟ右手/ 2024年04月18日 05:03/ 0 赞/ 100 阅读

相关写一个音乐播放器的微信小程序

要创建一个音乐播放器的微信小程序，您需要熟悉微信小程序的开发环境和语言(如 JavaScript 和 WXML/WXSS)。具体来说，您需要做以下几件事： 1. 设计音

我会带着你远行/ 2024年03月25日 08:51/ 0 赞/ 94 阅读

相关用微信小程序写一个微信（布局练习）

文章目录页面展示项目链接项目设计 app.json index（发现页面） wallet（钱包页面）

梦里梦外;/ 2023年01月15日 15:22/ 0 赞/ 168 阅读

相关给女朋友写一个微信小程序

一、背景 > 女朋友生日快来临，除了送口红，拍纪念照写真这些传统的礼物之外。作为一个程序员，为她写一个专属的小程序应该还行。于是开始简单构思，花了一下午时间为她写了一个简单的

╰+哭是因爲堅強的太久メ/ 2023年01月15日 08:28/ 0 赞/ 213 阅读

相关写一个微信小程序瀑布流

两列布局瀑布流 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

我不是女神ヾ/ 2023年01月12日 01:48/ 0 赞/ 173 阅读

相关微信小程序打开另一个小程序

前言有时候，我们需要在自己的小程序中打开另一个小程序，可以使用navigateToMiniProgram这个api来实现，可以看一下api的相关参数。 ![在这里插

àì夳堔傛蜴生んèń/ 2022年09月10日 09:30/ 0 赞/ 611 阅读

相关小程序瀑布流

上个写的有潜在bug，这个是修复此bug的。思路：布局依然是两列col1，col2，利用image标签的bindload函数，监听图片加载完成事件，加载完成后，转化改图

超、凢脫俗/ 2022年03月15日 06:28/ 0 赞/ 257 阅读

相关小程序瀑布流

小程序中获取元素使用swan.createSelectorQuery().selectAll('.leftwrapper,.rightwrapper').boundingCli

深碍√TFBOYSˉ_/ 2022年02月28日 17:40/ 0 赞/ 307 阅读

相关微信小程序写一个轮播图

微信小程序写轮播图，在微信开发者文档中，已经给了我们组件容器`<swiper>`，我们把需要轮播的东西放到`<swiper>`下的`<swiper-item>`中。附

Bertha 。/ 2021年12月12日 03:37/ 0 赞/ 395 阅读

相关小程序瀑布流布局

微信小程序开发交流qq群 581478349 微信：承接小程序开发 ![70][]![watermark_type_ZmFuZ3poZW5naGVpdGk

青旅半醒/ 2021年09月17日 12:14/ 0 赞/ 425 阅读