<waterfall>
是weex
中 瀑布流布局组件。
其中,子控件<header>
的sticky
属性默认为 上下都是悬浮的,可参考我修改后的waterfall demo,上下滑动就会发现这一表现。
但项目中,一般我们都是只在页面顶部进行悬浮,而不是底部,因此需要修改该表现。经过前端一系列的操作后,最终还是决定在 native的 weexSDK
中直接修改源码效果最佳,代码也更清晰。
查看源码后(版本为0.18.0),发现布局信息在:WXMultiColumnLayout.m
中,关键函数为:
- (void)_adjustStickyForHeaderAttributes:(WXMultiColumnLayoutHeaderAttributes *)header
next:(WXMultiColumnLayoutHeaderAttributes *)nextHeader
{
CGRect bounds = self.collectionView.bounds;
CGFloat originY = header.frame.origin.y;
CGFloat maxY = nextHeader ? (nextHeader.frame.origin.y - header.frame.size.height) : (CGRectGetMaxY(bounds) - header.frame.size.height);
CGFloat currentY = CGRectGetMaxY(bounds) - bounds.size.height + self.collectionView.contentInset.top;
CGFloat resultY = MIN(MAX(currentY, originY), maxY);
CGPoint origin = header.frame.origin;
origin.y = resultY;
header.frame = (CGRect){origin, header.frame.size};
header.hidden = NO;
}
在这个函数中,weex
会根据当前header
和下一个header
的位置,来设置不同的位移,那么在底部悬浮的关键代码就在于
CGFloat resultY = MIN(MAX(currentY, originY), maxY);
这里会限制header
的Y方向位移。
因此,只需要修改 maxY 即可。
CGFloat maxY = nextHeader ? (nextHeader.frame.origin.y - header.frame.size.height) : (CGRectGetMaxY(bounds) - header.frame.size.height);
改为:
CGFloat maxY = CGFLOAT_MAX;
Done.