跳到主要内容
Anchors
表示页面信息汇总，可以快速跳转到页面的某个位置或元素，比如目录、标题、等，通常会在页面的侧边栏显示一个锚点导航。
用法
样式
可访问性

示例​

水平导航方向​

使用布局容器top、bottom，将anchors放在顶部或者底部。

PCPhonePad
<page title="Anchors Horizontal">
    <head>
        <anchors data="{{anchors}}" placement="top" bindchanged="handleAnchorChanged"></anchors>
    </head>
    <module is-group>
        <module title="基本信息" x="moduleBase" height="450px">
        </module>
        <module title="BOM结构" x="moduleBom" height="300px">
        </module>
        <module title="门店管控" x="moduleStoreControl" height="350px">
        </module>
        <module title="一品多价" x="moduleMorePrice" height="500px">
        </module>
        <module title="一品多包装" x="moduleMorePack" height="350px">
        </module>
        <module title="库存信息" x="moduleInventory" height="550px">
        </module>
        <module title="其他" x="moduleOthers" height="300px">
        </module>
    </module>
</page>


export default XPage({
    data: {
        anchors: [
            { title: "基本信息", href: "moduleBase" },
            { title: "BOM结构", href: "moduleBom" },
            { title: "门店管控", href: "moduleStoreControl" },
            { title: "一品多价", href: "moduleMorePrice" },
            { title: "一品多包装", href: "moduleMorePack" },
            { title: "库存信息", href: "moduleInventory" },
            { title: "其他", href: "moduleOthers" },
        ]
    },

    handleAnchorChanged(anchor) {
        console.info('anchor changed', anchor);
    },
});


垂直导航方向​

设置module的width属性(1...12)，使用栅格系统，将anchors放在右侧或者左侧。

PCPhonePad
<page title="Anchors Vertical">
    <module is-group width="10">
        <module title="基本信息" x="moduleBase" height="450px">
        </module>
        <module title="BOM结构" x="moduleBom" height="300px">
        </module>
        <module title="门店管控" x="moduleStoreControl" height="350px">
        </module>
        <module title="一品多价" x="moduleMorePrice" height="500px">
        </module>
        <module title="一品多包装" x="moduleMorePack" height="350px">
        </module>
        <module title="库存信息" x="moduleInventory" height="550px">
        </module>
        <module title="其他" x="moduleOthers" height="300px">
        </module>
    </module>
    <module width="2">
        <anchors data="{{anchors}}" placement="right" bindchanged="handleAnchorChanged"></anchors>
    </module>
</page>


export default XPage({
    data: {
        anchors: [
            { title: "基本信息", href: "moduleBase" },
            { title: "BOM结构", href: "moduleBom" },
            { title: "门店管控", href: "moduleStoreControl" },
            { title: "一品多价", href: "moduleMorePrice" },
            { title: "一品多包装", href: "moduleMorePack" },
            { title: "库存信息", href: "moduleInventory" },
            { title: "其他", href: "moduleOthers" },
        ]
    },

    handleAnchorChanged(anchor) {
        console.info('anchor changed', anchor);
    },
});


Attributes​

属性说明类型可选值默认值端版本
placement锚的位置Stringright/left/top/bottomrightPC/Mobile--
data锚的选项Array<{href: String, title: String}>----PC/Mobile--

Events​

名称说明回调参数端版本
changed当前锚改变时触发({href: String, title: String})PC/Mobile--