自定义样式

排列

tabs-waterfall主要由导航栏(navBar)及内容区(content)组成，默认是由上下结构排列，可通过属性arrange-type改变默认结构例如设置为LR 可改成左右结构，导航栏将变成纵向，内容切换动画也会变成纵向。

点击查看源码

javascript

<tabs-waterfall arrange-type="LR"></tabs-waterfall>
//arrange-type有四种 TB(默认)、LR、RL、BT 分别代表 上下、左右、右左、下上排列

样式

导航栏及内容区有默认样式，如果不满足需求，可通过设置class的方式更改。

点击查看源码

html

  <qt-tabs-waterfall
    ref="tabs_waterfall" 
    class="tabs_waterfall_demo" 
    arrange-type="LR"
    class-nav-bar="tabs_waterfall_nav_bar" 
    class-content="tabs_waterfall_content">
  </qt-tabs-waterfall>

点击查看源码

css

.tabs_waterfall_nav_bar_vertical {
    width: 300px;
    height: 1080px;
    background-color: #7415B1;
    z-index: 999;
}

.tabs_waterfall_content_vertical {
    width: 1620px;
    height: 1080px;
    position: relative;
    background-color: dodgerblue;
}

间距

点击查看源码

javascript


//1 qt-waterfall距离顶部的距离  设置属性   :headBlank="90"
<qt-waterfall ref="waterfall" class="waterfall_demo" :headBlank="90"></qt-waterfall>

//2 qt-waterfall设置格子的间距 
//2.1使用 new WaterfallBuilder(1920,itemGap)  itemGap为格子间距  注意：格子的宽度相对的调整以便于页面布局
//2.2 亦可以在构建数据时 在onLoadPageDataAsync()return contentData[{...item}] 之前  设置contentData[{...item}]每条item的decortion {left: '',right: '',top: '',bottom: ''}的外边距并且可以设置指定位置的decoration

//3 设置导航栏(navBar)的间距
//3.1 设置 :sidePadding='90' 为导航的左右边距padding
//3.2 设置导航每个item之间的间距可 初始化导航栏数据时this.$refs.tabs_waterfall.setData(navs,1,1) navs[{...item}]每条item的decortion {left: '',right: '',top: '',bottom: ''}的外边距

所有API详见Tabs组件API

自定义样式 ​

排列 ​

样式 ​

间距 ​

自定义样式

排列

样式

间距