让bootstrap-table支持高度百分比

更改BootstrapTable.prototype.resetView 方法,以支持高度百分比定义,适应不同高度屏幕

在iOS 11系统上,UINavigation 添加 searchBar,导致UINavigationBar高度异常。

在iOS 11系统上,UINavigation 添加了searchBar之后,UINavigationBar的高度变成了56;在iOS 11系统以下,高度是44。
iOS 11系统UINavigation结构发生了改变。。 iOS11以前是直接把按钮加到了UINavigationBar上面,而iOS11则是先将按钮加到了_UITAMICAdaptorView,再加到_UIButtonBarStackView、_UINavigationBarContentView,接着才是UINavigationBar。因此如果需要获取导航栏按钮 frame 或者 superView,这里需要专门做下适配
如图所示:

金沙官网线上 1

UINavigationBar.png

由于这个原因就导致填了到UINavigation 上的titleView 、rightBarButtonItem、leftBarButtonItem 位置异常,titleView高度相应的变大,高度变成了36, iOS 11以前高度为28。 barButtonItem位置偏上。如下图:

金沙官网线上 2

iOS 11.png

金沙官网线上 3

iOS 11 former.png

如果UINavigation 没有添加UISearchBar/UISearchController,这个问题不会出现,我猜测是iOS 11添加了UISearchController原因导致

BootstrapTable.prototype.resetView = function (params) {
        var padding = 0;

        if (params && params.height) {
            this.options.height = params.height;
        }

        this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
            this.$selectItem.length === this.$selectItem.filter(':checked').length);

        if (this.options.height) {
            var toolbarHeight = this.$toolbar.outerHeight(true),
                paginationHeight = this.$pagination.outerHeight(true),
                height = this.options.height;

       //关键代码
            if (this.options.height.toString().indexOf("%") != -1) {
                height = $(window).height() * (parseFloat(this.options.height) / 100);
            }
            height = height - toolbarHeight - paginationHeight;
            this.$tableContainer.css('height', height + 'px');
        }

        if (this.options.cardView) {
            // remove the element css
            this.$el.css('margin-top', '0');
            this.$tableContainer.css('padding-bottom', '0');
            this.$tableFooter.hide();
            return;
        }

        if (this.options.showHeader && this.options.height) {
            this.$tableHeader.show();
            this.resetHeader();
            padding += this.$header.outerHeight();
        } else {
            this.$tableHeader.hide();
            this.trigger('post-header');
        }

        if (this.options.showFooter) {
            this.resetFooter();
            if (this.options.height) {
                padding += this.$tableFooter.outerHeight() + 1;
            }
        }

        // Assign the correct sortable arrow
        this.getCaret();
        this.$tableContainer.css('padding-bottom', padding + 'px');
        this.trigger('reset-view');
    };

解决方法:

1、网上搜索Stack Overflow 上直接更改searchBar的高度,

    if (@available(iOS 11.0, *)) {
        [[searchBar.heightAnchor constraintEqualToConstant:44.0] setActive:YES];
    }

这样强制更改高度,所有rightBarButtonItem、leftBarButtonItem 位置都正常了,但是searchBar的高度还是36,而整个UINavigationBar 的高度是44,所以SearchBar显得有点点大,还不知道怎么解决。效果如图:

金沙官网线上 4

更改高度之后.png

注意:这里Active要设置成YES,不然只生效一次

2、我的方法:不更改UINavigationBar高度,调整rightBarButtonItem、leftBarButtonItem的位置偏移量。

// 更改图片的偏移量
       if (@available(iOS 11, *)) {
           _scanButton.imageInsets = UIEdgeInsetsMake(6, 0, 0, 0);
      }

这样rightBarButtonItem、leftBarButtonItem以及searchBar 位置看着都正常了,但是出现这么一个问题,当你切换到别的VC的时候,别的VC的UINavigationBar高度是44,就会出现一点上移闪屏问题,所以我还是采取了第一种方法。

金沙官网线上 5

屏幕上移.gif

更改后的bootstrap-table.js的完整代码:

金沙官网线上,备注:只有UINavigation添加searchBar才会出现这个问题。 titleView使用自定义UIButton、UILabel等都不会出现这个问题。自定义控件的frame也不需要设置,系统自动适配好。

金沙官网线上 6金沙官网线上 7

本文由金沙官网线上发布于Web前端,转载请注明出处:让bootstrap-table支持高度百分比

您可能还会对下面的文章感兴趣: