weex tips

去掉weex
会悬浮在页

2019-01-07  本文已影响0人  乐天派大星晴

<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.

上一篇下一篇

猜你喜欢

热点阅读