@wines/split-pane
SplitPane 分屏
适用于固定屏幕高度拆分成上下,左右的屏幕,保持每个小块屏幕有一个固定的绝对高度.
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "VirtualList",
"usingComponents": {
"wux-icon": "@wines/icon",
"wux-badge": "@wines/badge",
"wux-tabbar": "@wines/tabbar",
"wux-tabbar-item": "@wines/tabbar/item",
"wux-split-pane":"@wines/split-pane",
"wux-split-pane-item":"@wines/split-pane/item"
}
}
示例
<wux-split-pane
wux-class="page"
default-size="{{46}}"
primary="second"
bindchange="onSplitPaneChange"
>
<wux-split-pane-item type="first">
<swiper style="height:{{first}}px" current="{{ index }}" bindchange="onSwiperChange">
<swiper-item catchtouchmove="stopTouchMove">
<scroll-view style="height:{{first}}px" scroll-y class="content">
<view class="item" wx:for="{{items}}" wx:key="index">
<view class="index">{{ '#' + item }}</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<view class="content">content2</view>
</swiper-item>
<swiper-item>
<view class="content">content3</view>
</swiper-item>
</swiper>
</wux-split-pane-item>
<wux-split-pane-item type="second">
<wux-tabbar
id="wux-tabbar"
safeArea
controlled
current="{{index}}"
position="bottom"
bindchange="onChange"
backgroundColor="#000"
>
<wux-tabbar-item title="Tab 1">
<wux-badge count="1" slot="icon-on">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
<wux-badge count="1" slot="icon-off">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 2">
<wux-badge dot slot="icon-on">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
<wux-badge dot slot="icon-off">
<wux-icon wux-class="icon" type="ios-home" size="22" />
</wux-badge>
</wux-tabbar-item>
<wux-tabbar-item title="Tab 3">
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-on"
/>
<wux-icon
wux-class="icon"
type="ios-home"
size="22"
slot="icon-off"
/>
</wux-tabbar-item>
</wux-tabbar>
</wux-split-pane-item>
</wux-split-pane>
import './tabbar.less';
const getItems = (count = 60): number[] => {
const items: number[] = [];
for (let i = 0; i < count; i++) {
items.push(i);
}
return items;
};
Page({
data: {
index: 0,
current: '0',
first: 0,
second: 46,
items: [] as number[],
},
onLoad() {
void this.loadData().then((items) => {
this.setData({
items,
});
});
},
loadData(): Promise<number[]> {
return new Promise((resolve) => {
setTimeout(() => {
resolve(getItems());
}, 1000);
});
},
onSwiperChange(e) {
console.log('onSwiperChange', e);
const current = e.detail.current;
this.setData({
current: String(current),
index: current,
});
},
stopTouchMove() {
/** */
},
onChange(e) {
console.log('onChange', e);
const current = e.detail.key;
this.setData({
current,
index: parseInt(e.detail.key),
});
},
onSplitPaneChange(e) {
console.log('onSplitPaneChange:', e.detail);
this.setData(e.detail);
},
});
API
Split Pane Props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-steps |
split | string | 分屏方式, 可选值 horizontal、vertical | horizontal |
primary | string | 分屏计算辅助子项类型: "first" 、 "second" | first |
timerTotalRuns | number | 同步计时器的检测次数, 1次100 ms | 5 |
splitPaneSize | number | 分屏容器大小, 默认为0动态计算, 通常情况为windowHeight/windowWidth | 0 |
autoCalcSplitPaneSize | boolean | 开启自动计算容器的pane大小,splitPaneSize=0 生效 | false |
defaultSize | number | 分屏计算辅助子项类型默认大小 | 46 |
safeArea | string | 指定安全区域是顶部还是底部top 、bottom | - |
bind:change | function | 当前自容器的宽/高 | - |
bind:visible | function | SplitPane ready显示出来 | - |
Steps externalClasses
Split Pane Item props
参数 | 类型 | 描述 | 默认值 |
---|
prefixCls | string | 自定义类名前缀 | wux-step |
type | string | first 、second 分屏子组件类型 | first |
Split Pane Slot
Split Pane Item Slot
Split Pane externalClasses
Split Pane Item externalClasses