目录

抽屉（Slidingview）

功能说明

该控件为多页面抽屉控件，效果为左视图、中间视图、右视图，实现侧边栏滑动。

HTML5

<slidingView id="slidingviewdefine0" mainView="sv_panel0" leftView="sv_panel1" rightView="sv_panel2">
    <div id="sv_panel0" title="标题1"/>
    <div id="sv_panel1" title="标题2"/>
    <div id="sv_panel2" title="标题3"/>
</slidingView>

属性列表

支持公共属性
参见公共属性说明

事件列表

支持公共事件
参见公共事件说明

实例

1、常用操作

$id("slidingview").set("slidingleft-width", "240"); //设置左边拉出的宽度
$id("slidingview").set("slidingright-width", "240");//设置右边拉出的宽度
$id("slidingview").set("openleftview","true"); //调用打开左边的抽屉,false为关闭
$id("slidingview").set("openrightview","true"); //调用打开右边的抽屉,false为关闭

2、抽屉结合多页容器的使用

功能说明：多页容器中每页文件过长时结合抽屉实现随页面高度滚动的效果。

注意：多页容器结合抽屉使用时，必须单独为多页容器里面的每个子页面设置滚动，而不能为多页容器整体设置。

<flipper id="flipperdefine0" viewindex="1">
    <Scrollview id="Scrollview_panel0" height="fill" vScrollEnabled="always" width="fill" hScrollEnabled="disabled">
        <div id="panel0" title="页面1">
            <imageflipper titleheight="20" id="imageflipper0" descheight="0" interval="2000" flipperbtnvisible="true" isloop="true" autoflip="true">
                <imageflipperitem id="imageflipper0_0" title="标题1" description="" onclick="" src="bz1.png"/>
                <imageflipperitem id="imageflipper0_1" title="标题2" description="" onclick="" src="bz2.png"/>
                <imageflipperitem id="imageflipper0_2" title="标题3" description="" onclick="" src="bz3.png"/>
            </imageflipper>
            <label id="label0">页面1</label>
        </div>
    </Scrollview>
    <div id="panel1" title="页面2">
        <toggleButtonGroup id="togglebuttongroup0">
            <toggleButton id="togglebutton0" value="0" textOff="分段1" textOn="分段1" type="button" checked="true"/>
            <toggleButton id="togglebutton1" value="1" textOff="分段2" textOn="分段2" type="button"/>
            <toggleButton id="togglebutton2" value="2" textOff="分段3" textOn="分段3" type="button"/>
            <toggleButton id="togglebutton3" value="3" textOff="分段4" textOn="分段4" type="button"/>
        </toggleButtonGroup>
        <Scrollview id="Scrollview_panel2" vScrollEnabled="always" width="fill" hScrollEnabled="disabled">
            <div id="panel2">
            <label id="label1">页面2</label>
            </div>
        </Scrollview>
    </div>
</flipper>