@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

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |

Split Pane Item props

| 参数 | 类型 | 描述 | 默认值 | | --------- | -------- | -------------------------------- | -------- | | prefixCls | string | 自定义类名前缀 | wux-step | | type | string | first、second 分屏子组件类型 | first |

Split Pane Slot

| 名称 | 描述 | | ---- | ---- |

Split Pane Item Slot

| 名称 | 描述 | | ---- | ---- |

Split Pane externalClasses

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |

Split Pane Item externalClasses

| 名称 | 描述 | | --------- | ------------ | | wux-class | 根节点样式类 |