美文网首页
vue-easytable 的scrollLeft ,ios 滚

vue-easytable 的scrollLeft ,ios 滚

作者: aaagu1234 | 来源:发表于2020-04-29 15:11 被阅读0次

首先,当div里面有滚动条的时候, 当两个div都有滚动条。并且需要同步滚动的时候,因为ios有滑动惯性和缓动的原因,会导致写了js同步滚动代码以后,会有抖动的问题。
一般解决方案就是加入一个标志位来。
下面是vue-easytable 里面的scroll-control-mixin.js 改造后的代码。
监听touchstart 来赋标志为true或者false。来解决同步滚动的问题。

exports.default = {
            methods: {
                        body1Mousewheel: function body1Mousewheel(e) {

                                    var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');

                                    var e1 = e.originalEvent || window.event || e;
                                    var scrollHeight = e1.wheelDelta || e1.detail * -1;
                                    body2.scrollTop = body2.scrollTop - scrollHeight;
                        },
                        bodyScrollTop: function bodyScrollTop() {

                                    var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
                                    var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');

                                    if (body1) {
                                                body1.scrollTop = 0;
                                    }
                                    body2.scrollTop = 0;
                        },
                        body2Scroll: function body2Scroll(e) {
                                    
                                   
                                    var view2 = this.$el.querySelector('.v-table-rightview');
                                    var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
                                    var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');

                                    if (body1) {
                                                body1.scrollTop = body2.scrollTop;
                                    }
                                    var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');
                                    
                                    if (rightViewFooter && !scrollFlag) {
                                          rightViewFooter.scrollLeft = body2.scrollLeft;
                                    }

                                    view2.querySelector('.v-table-header').scrollLeft = body2.scrollLeft;
                        },
                        rightViewFooterScroll: function rightViewFooterScroll() {
                              
                               
                              var view2 = this.$el.querySelector('.v-table-rightview');

                              var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');

                              view2.querySelector('.v-table-header').scrollLeft = rightViewFooter.scrollLeft;
                              if(scrollFlag){
                                 view2.querySelector('.v-table-body').scrollLeft = rightViewFooter.scrollLeft;
                              }
                             
                        },
                        rightViewFooterTouchstart: function rightViewFooterTouchstart(){
                              scrollFlag = true;
                        },
                        body2Touchstart: function body2Touchstart(){
                              scrollFlag = false;
                        },
                        scrollControl: function scrollControl() {
                                    var _this = this;

                                    this.unbindEvents();

                                    setTimeout(function (x) {

                                                var body1 = _this.$el.querySelector('.v-table-leftview .v-table-body');
                                                var body2 = _this.$el.querySelector('.v-table-rightview .v-table-body');
                                                var rightViewFooter = _this.$el.querySelector('.v-table-rightview .v-table-footer');

                                                _utils2.default.bind(body1, 'mousewheel', _this.body1Mousewheel);
                                                _utils2.default.bind(body2, 'scroll', _this.body2Scroll);
                                                _utils2.default.bind(rightViewFooter, 'scroll', _this.rightViewFooterScroll);
                                                _utils2.default.bind(rightViewFooter, 'touchstart', _this.rightViewFooterTouchstart);
                                                _utils2.default.bind(body2, 'touchstart', _this.body2Touchstart);
                                    });
                        },
                        unbindEvents: function unbindEvents() {

                                    var body1 = this.$el.querySelector('.v-table-leftview .v-table-body');
                                    var body2 = this.$el.querySelector('.v-table-rightview .v-table-body');
                                    var rightViewFooter = this.$el.querySelector('.v-table-rightview .v-table-footer');

                                    _utils2.default.unbind(body1, 'mousewheel', this.body1Mousewheel);
                                    _utils2.default.unbind(body2, 'scroll', this.body2Scroll);
                                    _utils2.default.unbind(rightViewFooter, 'scroll', this.rightViewFooterScroll);
                        },
                        scrollToTop: function scrollToTop() {

                                    this.bodyScrollTop();
                        }
            },

            beforeDestroy: function beforeDestroy() {

                        this.unbindEvents();
            }
};

相关文章

网友评论

      本文标题:vue-easytable 的scrollLeft ,ios 滚

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