美文网首页weex tips
去掉weex
会悬浮在页

去掉weex
会悬浮在页

作者: 乐天派大星晴 | 来源:发表于2019-01-07 16:30 被阅读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.

    相关文章

      网友评论

        本文标题:去掉weex

        会悬浮在页

        本文链接:https://www.haomeiwen.com/subject/ybwurqtx.html