使用datav时，容器高度改变后，动态改变轮播表的行数

最新推荐文章于 2024-07-24 13:13:02 发布

摫

最新推荐文章于 2024-07-24 13:13:02 发布

阅读量2.4k

点赞数

分类专栏：前端解决方案

本文链接：https://blog.csdn.net/qq_44381427/article/details/113889726

版权

轮播表 Vue.js 窗口高度动态行数响应式设计

关键词由CSDN通过智能技术生成

前端解决方案专栏收录该内容

25 篇文章 0 订阅

订阅专栏

在页面中使用轮播表当按f11改变窗口高度时，轮播表行数不变间隔会改变，我们想根据高度计算需要多少行

<div id="list">
	<dv-scroll-board :config="xxConfig" style="width:100%; height:100%"/>
<div>

var myVue= new Vue({
        el: '#myVue',
        data: {
        	list:[],
        	orgListRowNum：5
        },
        computed: {
        	xxConfig:{
        	 	var data = [];
                this.list.forEach(function (value) {
                    data.push([value.name , value.address, value.type]);
                });
                var width = $('#list').width();
                var columnWidth = [width * 0.4, width * 0.4, width * 0.2];
                return {
                    headerBGC: 'rgba(11,114,194,0.3)',
                    oddRowBGC: '',
                    evenRowBGC: '',
                    header: ['姓名', '地址', '类型'],
                    data: data,
                    headerHeight: 30,
                    rowNum: this.orgListRowNum,
                    columnWidth: columnWidth,
                    align: ['center', 'center', 'center'],
                    hoverPause: true,
                }
        	}
        }
   });

注册监听窗口resize事件，计算行数

 				var _this = this;
                var resizeListener = function () {
                    var height = $('#list').height();
                    _this.orgListRowNum = Math.floor(height / 23);
                };
                window.addEventListener('resize', resizeListener);