實現(xiàn)分頁組件懸浮在頁面底部

項目頁面中使用eletable + ele的pagination分頁控件。
想實現(xiàn)分頁控件在頁面數(shù)據(jù)多、并且屏幕下的情況下，不隨著頁面滾動。而是懸浮在窗口底部。

現(xiàn)在用css實現(xiàn)了定位在底部，但是當數(shù)據(jù)少的時候或者屏幕大的時候還是跟隨在table的底部，而不是一直?？吭诘撞俊?/p>

我自己的實現(xiàn)思路是判斷底部控件與上面table的高度間隔，如果大于0的話，就改變樣式。但是如何動態(tài)的取到高度間隔呢？或者有沒有其他的實現(xiàn)方式呢

回答

編輯回答

莓森

對兼容性要求不高的話，我覺得可以試一下position:sticky;。

2017年10月2日 01:26

編輯回答

背叛者

已經(jīng)實現(xiàn)了，分享下方法。

整體思路是 :
獲取窗口高度，再獲取table高度。如果table的高度>(窗口高度 - 上邊導航欄的高度)那說明數(shù)據(jù)超出屏幕，則將分頁器絕對定位到底部，否則跟隨table底部即可。

詳細步驟如下：
第一步：document.documentElement.clientHeight 獲取瀏覽器整體的高度。
這里要注意：我用的vue，所以在mounted中用onresize監(jiān)聽窗口變化

    window.onresize = () => {
                return (() => {
                    window.fullHeight = document.documentElement.clientHeight
                    _this.fullHeight = window.fullHeight
                    _this.setPaginationStyle()
                })()
            }

第二步：給你的table定義一個ref屬性，this.$refs.myTable.$el.clientHeight 拿到table的高度。

這里要注意下 this.$refs.myTable.$el.clientHeight拿到的高度是數(shù)據(jù)填充之前獲取到的（這里坑了我小半天），所以我在vue的updated鉤子函數(shù)中再次獲取一次。具體方法如下：

  /**
         * 設(shè)置分頁位置的方法
         */
        setPaginationStyle:function () {


            console.log('myTable',this.$refs.myTable)

            console.log('clientHeight',this.$refs.myTable.$el.offsetHeight)
            console.log('fullHeight',this.fullHeight)

            //瀏覽器高度小于 704 直接定位到底部
            if(this.fullHeight < 704){

                this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
                this.myTableStyle = 'margin-bottom:35px'
            }else {

                //table寬度小于 瀏覽器高度 - （面包屑 + 導航欄的高度）說明需要固定位置
                if(this.$refs.myTable.$el.clientHeight < this.fullHeight - 320 ){
                    this.paginationStyle = 'background-color: white'
                    this.myTableStyle = 'margin-bottom:0px'
                }else {
                    this.paginationStyle = 'background-color: white;position: fixed;bottom: 0; width: 100%; z-index: 100;'
                    this.myTableStyle = 'margin-bottom:35px'
                }
            }
        }

2017年9月29日 06:36

編輯回答