小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中，用到瀑布流的地方很是多，每次都写一个瀑布流，重复一次逻辑，做为程序员，确定是很是不肯意的。
瀑布流的形式都是大同小异，不一样的是瀑布流中每一个模块的内容，随业务而变化。
因此，咱们把瀑布流框架抽象成组件，瀑布流的内容由业务肯定。这样便可实现组件化和自定义的最大平衡，微信小程序组件源码。
首先，咱们来看一下瀑布流组件在实际项目中的实际效果。javascript
1 实际效果
瀑布流组件实际效果以下图所示，左侧为用户交互效果，右侧为图片懒加载实际效果。
html
2 什么是瀑布流？
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，waterfall-item宽度固定，高度不定，视觉表现为良莠不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。以下图所示:
java
3 实现功能
该瀑布流组件实现了如下几个功能：node
- 支持图片懒加载
- 支持上拉数据翻页
- 支持自定义样式
- 支持瀑布流Item间隔底层自动计算
- 原生组件模式：即类
swiper和swiper-item组件用法 - 组件与数据彻底解耦
4 实现原理
4.1 waterfall 和waterfall-item实现原理
第一步：在 waterfall-layout 目录下建立 waterfall 和 waterfall-item 组件，目录结构以下：git
. ├── query-node.js ├── waterfall-item.js ├── waterfall-item.json ├── waterfall-item.wxml ├── waterfall-item.wxss ├── waterfall.js ├── waterfall.json ├── waterfall.wxml └── waterfall.wxss
第二步：分别在waterfall.js 和 waterfall-item.js的relations选项中指定组件父、子级关系：程序员
// waterfall.js
Component({
// ... other code
relations: {
'./waterfall-item': {
type: 'child',
},
// ... other code
}
})
// waterfall-item.js
Component({
// ... other code
relations: {
'././waterfall': {
type: 'parent',
},
// ... other code
}
})
指定彼此的父、子组件的关系后，便可经过 this.getRelationNodes 原生 API，就能访问彼此实例对象及其属性和方法。 github
第三步：实现waterfall.wxml 和 waterfall-item.wxml代码： waterfall.wxml代码实现很是简单，只有5行代码：web
<view class="waterfall custom-class">
<view class="waterfall-inner">
<slot ></slot>
</view>
</view>
一样，waterfall-item.wxml代码实现也很是简单，只有5行代码：json
<view
class="waterfall-item custom-class"
style="{{position}}:0;top:{{(top >= 0 ? top + 'px' : 0 + 'rpx')}};"
>
<slot ></slot>
</view>
不知道slot用法的童鞋，请参考微信小程序自定义组件模板和样式文档。小程序
4.2 瀑布流原理
其实，不论是微信小程序、web、仍是原生APP，瀑布流的实现原理都是同样的。均可以绝对定位和位置计算来实现。
瀑布流的大致过程以下图所示：
第一步：数据经过this.setData从逻辑层传输到视图层，进行第一渲染，因为每一个waterfall-item 的top:0; 和 position:left;，因此都重叠了在一块儿。
第二步：经过节点查询API获取每一个waterfall-item元素信息，而且计算出正确的top和position值。
第三步：setData每一个waterfall-item的top和position，实现重排。
具体逻辑实现以下：
首先，咱们来实现一个节点查询API querySelector，以后会用到：
// query-node.js
/**
* 获取当前页面中，选择器为 selector 的第一个node节点
* @param {String} selector 符合微信小程序规范的选择器
* @param {Object} context 调用环境，普通页面中为wx，自定义组件中为this；默认值为wx.
* @return {Array} 返回一个数组，第一个元素为 node 节点
*/
export const querySelector = function (selector, context = wx) {
return new Promise((resolve, reject) => {
context.createSelectorQuery()
.select(selector)
.boundingClientRect((res) => {
if (res) {
resolve(res);
} else {
reject(`不存在选择器为 ${selector} 的节点`);
}
})
.exec();
})
};
接着，看一下组件waterfall 和waterfall-item在实际项目中的用法：
<waterfall
loading="{{loadMorePending}}"
isAllLoaded="{{isAllLoaded}}"
>
<block wx:for="{{data.sections}}" wx:key="id" wx:for-item="product">
<waterfall-item
index="{{index}}"
custom-class="flow-item-wrapper"
>
<view class="product-item">
业务代码
</view>
</waterfall-item>
</block>
</waterfall>
当第一个waterfall-item组件，在视图层布局完成后会执行ready生命周期钩子。
在 ready 生命周期钩子中，咱们须要作两件事：
- 获取父组件
waterfall的实例对象，并挂载在waterfall-item组件的this实例对象上。由于以后咱们须要在waterfall-item组件中修改waterfall上的数据。 - 获取
waterfall-item组件的高度，计算waterfall-item组件的位置信息top和position。
// waterfall-item.js
import { querySelector } from './query-node';
Component({
// ... other code
lifetimes: {
ready() {
const [waterfall] = this.getRelationNodes('./waterfall');
this.parent = waterfall;
this.setWaterfallItemPosition();
},
}
methods:{
async setWaterfallItemPosition() {
querySelector('.waterfall-item', this)
.then(async (node) => {
const { top, position } = await this.parent.getWaterfallItemPostionInfo(node);
this.setData({
top,
position
})
})
},
}
// ... other code
})
在setWaterfallItemPosition方法中，咱们调用了父组件上的方法this.parent.getWaterfallItemPostionInfo，获取当前waterfall-item组件的top和position信息。并把已经渲染好的waterfall-item组件的累计高度缓存在waterfall的leftHeights和rightHeights属性上，用于计算下一个waterfall-item组件位置，主要逻辑以下：
// waterfall.js
const POSITION_LEFT = 'left';
const POSITION_RIGHT = 'right';
Component({
// ... other code
/**
* 组件的方法列表
*/
methods: {
lifetimes: {
ready() {
this.initParams();
}
},
initParams() {
this.leftHeights = 0;
this.rightHeights = 0;
},
/**
* 设置 waterfall-item 的高度值
* @param {Object} node waterfall-item 组件位置尺寸数据
*/
async getWaterfallItemPostionInfo(node) {
let top = 0;
let position = POSITION_LEFT;
const { height } = node;
const { itemGap } = this;
if (this.leftHeights <= this.rightHeights) {
top = this.leftHeights;
if(this.leftHeights === 0) {
this.leftHeights += height;
} else {
top += itemGap;
this.leftHeights += (height + itemGap);
}
} else {
position = POSITION_RIGHT;
top = this.rightHeights;
if(this.rightHeights === 0) {
this.rightHeights += height;
} else {
top += itemGap;
this.rightHeights += (height + itemGap);
}
}
return {
top,
position,
}
}
// ... other code
}
})
当全部的waterfall-item重排结束后，瀑布流渲染完成。
4.3 图片懒加载原理
微信小程序中，<image>标签自己是支持懒加载的，当lazy-load={{true}}，且在即将进入必定范围（上下三屏）时才开始加载。
也就是说，当lazy-load={{true}}，<image>标签初次渲染在视口上下三屏以外时，是不会请求图片资源的，当<image>即将进入三屏以内时，才会加载。
在4.2小节的图3中，<waterfall-item>的初始化位置设置成了top:0; 和 position:left;，因此，都在视口中。若是将top的值成三屏以外的数值，例如，400vh或者更大，则<waterfall-item>重排以后，任然在三屏以外的图片即会自动懒加载。
<view
class="waterfall-item custom-class"
style="{{position}}:0;top:{{(top >= 0 ? top + 'px' : itemCount * 100 + 'vh')}};"
>
<slot ></slot>
</view>
Component({
// waterfall-item.js
// ... other code
lifetimes: {
ready() {
const { itemCount } = this.data;
const [waterfall] = this.getRelationNodes('./waterfall');
waterfall.childCount += 1;
this.parent = waterfall;
this.setData({
itemCount: itemCount + waterfall.childCount,
})
},
},
// ... other code
})
4.4 数据翻页
由于实现了wx:for <waterfall-item>功能，和<swiper-item>组件同样，所以翻页逻辑彻底由用户本身定制，<waterfall>和<waterfall-item>只给你提供翻页的功能，组件就能够和瀑布流数据结构彻底解耦。
4.5 瀑布流Item间隔底层自动计算
将列和行中，两个<waterfall-item>组件之间的距离定义为itemGap，则:
itemGap = waterfall宽度 - （waterfall-item宽度 * 2）
在<waterfall> 的ready钩子中，能够获取到<waterfall>组件的宽度；同理，在<waterfall-item>的ready钩子中，能够获取到<waterfall-item>组件的宽度。
在调用getWaterfallItemPostionInfo以前，获取到itemGap的值便可。这样，在计算<waterfall-item>的top值时，除了第一行的<waterfall-item>的top值等于0以外，其余全部<waterfall-item>的top值等于：
// this.leftHeights += height + itemGap; // or // this.rightHeights += height + itemGap;
具体代码实现请查看源码
5 总结
经过瀑布流框架抽象，使<waterfall>和<waterfall-item>接近原生组件使用体验，同时使组件与数据彻底解耦。经过巧妙的初始化位置top设置，使瀑布流具图片有懒加载的功能。