zsmj
3 years ago
7 changed files with 134 additions and 72 deletions
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 560 KiB |
@ -0,0 +1,65 @@
|
||||
# tab选项卡的logic属性 |
||||
|
||||
tab常用的写法,我们大多会直接或者间接的给tab赋予固定高度,时期在固定区域内切换显示. |
||||
如下两种示例分别对应的是直接和间接固定高度.类似的`bi.absolute` `bi.vertical_fill`等布局也可以实现间接固定高度 |
||||
在实现原理上,此时tab内部为绝对布局.所有子tab均设定了`top:0,left:0,width:100%,height:100%` |
||||
|
||||
```javascript |
||||
const widget1 = { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
el: nav, |
||||
}, { |
||||
el: { |
||||
type: "bi.tab", |
||||
height: 300, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
|
||||
const widget2 = { |
||||
type: "bi.vtape", |
||||
items: [ |
||||
{ |
||||
el: nav, |
||||
height: 30, |
||||
}, { |
||||
el: { |
||||
type: "bi.tab", |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
``` |
||||
|
||||
 |
||||
|
||||
有些业务场景,我们需要高度不固定的tab,tab实际高度由子页面内容撑起来.这里就轮到`bi.tab`的`logic:{dynamic:true}`属性发挥作用了 |
||||
这时tab的内部为`bi.vertical`布局,高度由子页面决定, |
||||
|
||||
```javascript |
||||
const widget = { |
||||
type: "bi.vertical", |
||||
items: [ |
||||
{ |
||||
el: nav, |
||||
}, { |
||||
el: { |
||||
type: "bi.tab", |
||||
logic: { |
||||
dynamic: true, |
||||
}, |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
``` |
||||
|
||||
 |
||||
|
||||
最后列举一下在现有业务中的应用,用户认证配置界面 |
||||
|
||||
 |
||||
|
||||
@ -0,0 +1,65 @@
|
||||
# 让滚动条贴附在容器边缘的实现 |
||||
|
||||
日常业务中会出现滚动条,如果没有贴边显示的话,视觉效果会大打折扣.直接原因是一层又一层的布局嵌套,使得当前滚动的容器自身就已经脱离了页面区域. |
||||
如何在不借助`padding`的情况下,让滚动条贴附在容器边缘呢? |
||||
|
||||
 |
||||
 |
||||
|
||||
多层级嵌套时,避免在顶层设置gap属性 |
||||
例如常用的上面导航下面tab示例,由于外层组件设置了`hgap:10`,因此即使内部`bi.vertical`组件出现滚动条,也无法贴附在容器边缘 |
||||
因此开发过程中药尽量将gap设置下沉到具体的子组件 |
||||
|
||||
```js |
||||
const widget = { |
||||
type: "bi.vtape", |
||||
cls: "bi.border", |
||||
width: 300, |
||||
hgap: 10, |
||||
items: [ |
||||
{ |
||||
type: "demo.nav", |
||||
height: 36, |
||||
}, |
||||
{ |
||||
type: "bi.tab", |
||||
showIndex: 1, |
||||
cardCreator: v => { |
||||
return { |
||||
type: "bi.vertical", // 假设这个布局会出现滚动条 |
||||
}; |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
``` |
||||
|
||||
进行一次额外的布局包装,多一层DOM,收获一份体验 |
||||
因为vertical2没有高度,因此其会被子节点撑起高度,而后导致vertical1发生溢出,出现滚动条 |
||||
这样既实现了滚动条贴边,又保证了每一个列表项的左右间距. |
||||
|
||||
```js |
||||
const widget3 = { |
||||
type: "bi.vertical", // vertical1 |
||||
cls: "bi-border vertical1", |
||||
hgap: 10, |
||||
height: 300, |
||||
width: 300, |
||||
items: [ |
||||
{ |
||||
type: "bi.vertical", // vertical2,假设这个布局会出现滚动条, |
||||
cls: "vertical2", |
||||
items: (new Array(100)).fill(0).map((v, i) => { |
||||
return { |
||||
type: "bi.label", |
||||
cls: "bi-list-item-active2", |
||||
text: `第${i}项`, |
||||
}; |
||||
}), |
||||
}, |
||||
], |
||||
}; |
||||
``` |
||||
|
||||
 |
||||
 |
||||
Loading…
Reference in new issue