@wines/split-pane

@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	根节点样式类