当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

16、选项卡,内容少的项出现大面积空白

上传时间:2020-05-21             浏览次数:74

一、现象

选项卡的内容区域高度不一致时,内容少的项会展示大面积空白,而不是高度自动适应。

二、原因

选用的touchslide选项卡效果不是高度自适应的,选项内容区域的高度会默认以最高一项的高度为准,内容少的项自然会留有大片空白。

三、解决方案

1、针对移动端

选择touchslide的高度自适应的tab效果。参考官网案例(思路:增加 endFun):http://www.superslide2.com/TouchSlide/demo/4.3zsyTab.html

TouchSlide( { slideCell:"#tabBox1", endFun:function(i){ //高度自适应
var bd = document.getElementById("tabBox1-bd");
bd.parentNode.style.height = bd.children[i].children[0].offsetHeight+"px";
if(i>0)bd.parentNode.style.transition="200ms";//添加动画效果
}

} );

2、针对PC端

让选项内容区域的元素高度自适应:height:auto

0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们