小程序瀑布流组件怎么实现翻页与图片懒加载

小编这次要给大家分享的是小程序瀑布流组件怎么实现翻页与图片懒加载,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的。
瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化。
所以,我们把瀑布流框架抽象成组件,瀑布流的内容由业务确定。这样即可实现组件化和自定义的最大平衡,微信小程序组件源码。

首先,我们来看一下瀑布流组件在实际项目中的实际效果。

瀑布流组件实际效果如下图所示,左侧为用户交互效果,右侧为图片懒加载实际效果。

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布的局,<代码> waterfall-item 宽度固定,高度不定,视觉表现为参差不齐的多栏布的局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。如下图所示:

该瀑布流组件实现了以下几个功能:

<李>支持图片懒加载李 <>李支持上拉数据翻页 <李>支持自定义样式李 <>李支持瀑布流项间隔底层自动计算李 <李>原生组件模式:即类偷窃者和swiper-item组件用法李 <>李组件与数据完全解耦李

<强> 4.1瀑布和waterfall-item实现原理

第一步:在waterfall-layout目录下创建瀑布<代码> 和<代码> waterfall-item> 。 　　├──query-node.js 　　├──waterfall-item.js 　　├──waterfall-item.json 　　├──waterfall-item.wxml 　　├──waterfall-item.wxss 　　├──waterfall.js 　　├──waterfall.json 　　├──waterfall.wxml 　　└──waterfall.wxss

第二步:分别在<代码>瀑布。js代码和<代码> waterfall-item。js代码的<代码> 选关系项中指定组件父、子级关系:

//waterfall.js
　　组件({//渌?
　　关系:{
　　& # 39;。/waterfall-item& # 39;: {
　　类型:& # 39;孩子# 39;
　　},//渌?
　　}
　　})

//waterfall-item.js
　　组件({//渌?
　　关系:{
　　& # 39;。/?瀑布# 39;:{
　　类型:& # 39;父母# 39;
　　},//渌?
　　}
　　})

指定彼此的父,子组件的关系后,即可通过<代码>。getRelationNodes 原生API,就能访问彼此实例对象及其属性和方法。

第三步:实现<代码>瀑布。wxml 和<代码> waterfall-item。wxml 代码:
<代码>瀑布。wxml 代码实现非常简单,只有5行代码: