移动端页面布局

移动端提供页面布局组件和细节布局组件

页面布局

移动端提供页面布局组件：布局、导航栏、标签栏、折叠面板、步骤条、标签页，单元格组、粘性布局。界面效果如下面几张图所示

布局，将页面分为上、中、下三个部分，其中“上”粘贴在页面顶部，“下”粘贴在页面底部

导航栏，顶部导航栏，粘贴在页面顶部

标签栏，底部导航栏，粘贴在页面底部

折叠面板

步骤条

标签页

单元格组

粘性布局

导航栏

页面顶部标题栏，系统提供默认导航栏和自定义导航栏。默认导航栏只有页面标题和返回按钮（左图），自定义导航栏支持在左右两侧增加按钮（右图），如下图所示

特别说明

移动端门户单独运行时，需要显示顶部导航栏，在 URL 中添加 standalone=true 表示独立运行

移动端门户在第三方 APP 中打开，且第三方 APP 提供导航栏时，不需要显示顶部导航栏，否则会显示为双层导航栏的效果。URL 中没有 standalone 参数或 standalone=false 时表示嵌入运行

默认导航栏感知 standalone 参数，参数为 true 时显示，否则不显示

导航栏组件不感知 standalone 参数，需要开发者自行处理

默认导航栏

导航栏支持全局配置和页面配置。在全局配置中，设置全局导航栏样式，如下图所示

导航栏样式：“默认”表示使用默认导航栏，页面默认会显示一个导航栏；“自定义”表示页面不显示导航栏
导航栏标题背景色：选择一个颜色
导航栏标题文字：无需设置，默认使用页面标题
导航栏标题文字颜色：只有黑和白两种颜色

在页面组件上设置单个页面的导航栏样式，如下图所示

设置“全局配置”或“页面组件”中的“导航栏样式”为自定义，页面不显示默认导航栏。

自定义导航栏

在页面上添加导航栏组件，支持定制标题、定制左侧和右侧，在右侧添加两个图标，设计界面如下图所示

运行效果如下图所示

标签栏

页面底部导航栏，企业门户移动端提供底部导航栏，如下图所示，配置方式参考《移动端门户导航栏配置》

标签栏组件，显示多项，有一项是当前选中的（颜色不同），运行效果如下图所示

标签栏组件支持添加项，设置默认激活项，设计界面如下图所示，默认激活颜色是主题色

标签栏组件的“项”支持设置图标、文本、名称等，设计界面如下图所示

标签栏的“项”支持显示图片，图片需要设置激活图片和非激活图片，设计界面如下图所示

折叠面板

将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容，运行效果如下图所示

标签页、步骤条

标签页：选项卡组件，用于在不同的内容区域之间进行切换步骤条：用于展示操作流程的各个环节，让用户了解当前的操作在整体流程中的位置

具体介绍参考《移动端列表类组件》中的标签页和步骤条

单元格组

单元格组提供分组标题、为其中的单元格提供上下外边框、支持显示为卡片风格，运行效果如下图所示

设计界面如下图所示

粘性布局

粘性布局组件与 CSS 中 position: sticky 属性实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。vant 支持固定在屏幕底部。运行效果如下图所示

设计界面如下图所示

挂载节点（指定容器）属性支持指定组件所在的容器，页面滚动时，组件会始终保持在容器范围内，当组件即将超出容器底部时，会固定在容器的底部

react 实现

通过“指定容器”函数指定组件的容器，设计界面如下图所示

本例粘性布局组件放在视图组件中，w 代码如下

    <vantui:View id="stick-in-view" style="height:275px;background-color:#fcf8bd;">
        <vantui:Sticky container="{$page.sticky0ContainerFn()}" id="sticky0">
            <vantui:Button id="button1" text="指定容器">
            </vantui:Button>
        </vantui:Sticky>
    </vantui:View>

指定容器的 js 代码如下，其中 stick-in-view 是粘性布局组件所在容器（本例为视图）的 id

import { createSelectorQuery } from '@tarojs/taro';
sticky0ContainerFn = () => {
    return createSelectorQuery().select(`#stick-in-view`);
}

vue 实现

通过“挂载节点”函数指定组件的容器，设计界面如下图所示

本例粘性布局组件放在 div 中，div 使用 ref 属性将 js 文件中声明的 ref 对象与 DOM 元素关联起来，w 代码如下

    <div id="container0" ref="{container0}" style="height:294px;background-color:#fcf8bd;">
        <vant:Sticky container="{sticky1ContainerFn()}" id="sticky1">
            <vant:Button id="button1" text="指定容器">
            </vant:Button>
        </vant:Sticky>
    </div>

使用 ref() 方法声明一个 ref 对象，在挂载节点中返回 ref 对象，js 代码如下

import { reactive, ref, watch } from "vue";
import { usePage, useData } from "vue_addon/core";
let $page = usePage();
let container0 = ref();

let sticky1ContainerFn = () => {
    return container0;
}

上中下布局

上中下布局组件，将页面分为上、中、下三个部分，其中“上”粘贴在页面顶部，“下”粘贴在页面底部

特别说明

实现定头定底，不需要使用布局组件，在组件上设置粘性布局 sticky 即可实现定头定底

使用布局组件实现定头定底，需要设置页面组件的自动充满为 true

间距

间距组件用于设置元素之间的水平间距或垂直间距，运行效果如下图所示

组件属性说明如下

间距方向：垂直还是水平
间距大小：单位 px
对齐方式：支持开头、居中、结尾、基线
自动换行：采用水平间距时，内部元素是否换行
填充父元素：是否让间距组件成为一个块级元素，填充整个父元素

细节布局

移动端提供细节布局组件：单元格、滑动单元格、商品卡片、提交栏、动作栏（商品导航）、行列，界面效果如下面几张图所示

单元格

滑动单元格

商品卡片

提交栏

动作栏（商品导航）

行列

单元格

单元格组中可以包括多个单元格，单元格也可以单独使用，单元格用于展示左标签右内容的形式，运行效果如下图所示

单元格组件支持配置和定制，设计界面如下图所示，简单情况使用配置和样式，复杂情况使用定制

本例单元格组和单元格样式定义如下

react 代码

:global{
    .van-cell-group{
        background-color: transparent;
    }
    .van-cell-group .van-cell{
        margin-bottom: 0.744rem;
        padding: 0.744rem;
    }
    .van-cell-group .van-cell>.van-cell__left-icon{
        font-size: 1.2rem;
        color: var(--primary-color);
    }
    .van-cell-group .van-cell>.van-cell__title{
        font-size: 0.7rem;
        padding-left: 0.4rem;
    }
    .van-cell-group .van-cell>.van-cell__value{
        color: #999;
        font-size: 0.6rem;
    }
}

vue 代码

:deep{
    .van-cell-group{
        background-color: transparent;
    }
    .van-cell-group > .van-cell{
        margin-bottom: 0.744rem;
    }
    .van-cell-group > .van-cell .van-field__left-icon .van-icon{
        font-size: 1.2rem;
        color: var(--van-primary-color);
    }
    .van-cell-group > .van-cell>.van-cell__title{
        font-size: 0.7rem;
        padding-left: 0.4rem;
    }
    .van-cell-group  .van-cell>.van-cell__value{
        color:#999;
        font-size: 0.6rem;
        text-align: right;
    }
}

单元格组件提供点击事件，在事件中判断是否点击了箭头，代码如下

event.target.className.indexOf("van-icon-arrow") >= 0

在事件中使用“操作组合”，在“是否执行”中使用上面的代码判断是否点击了箭头，设计界面如下图所示

滑动单元格

滑动单元格组件是可以左右滑动来展示操作按钮的单元格组件，运行效果如下图所示

提供左侧和右侧两个插槽，用于定义两侧滑动区域的内容，支持设置宽度。滑动单元格可以嵌套任意内容，比如嵌套一个商品卡片

vantui 异步关闭

设置“异步关闭”属性为是，在“关闭事件”中，调用 e.detail.instance?.close(); 方法关闭

在关闭事件中

e.detail.position 为关闭时点击的位置，left 表示点击了左侧插槽，right 表示点击了右侧插槽
e.detail.name 为名称属性绑定的值
e.detail.instance 表示滑动单元格实例

左侧插槽放置删除按钮，删除数据实现异步关闭，代码如下

    onSwipeCell0Close = ({ e }) => {
        if (e.detail.position == "left") {
            this.comp("productData").deleteData().then(() => {
                e.detail.instance?.close();
            }, () => {

            })
        }else{
            e.detail.instance?.close();
        }
    }

vant 异步关闭

在“关闭前回调”方法中返回 promise，执行 resolve(true) 关闭，执行 resolve(false) 不关闭

position 为关闭时点击的位置，left 表示点击了左侧插槽，right 表示点击了右侧插槽，cell 表示点击了内部区域，outside 表示点击外部区域

商品卡片

商品卡片组件用于展示图片及其它信息，运行效果如下图所示

商品卡片组件支持配置和定制，设计界面如下图所示，简单情况使用配置和样式，复杂情况使用定制

vue 商品卡片组件的价格只支持文本，可以使用“数值转字符串”方法将数值转换为字符串，如下图所示

提交栏

提交栏组件用于展示一个数字和一个按钮，运行效果如下图所示

上图的设计界面如下图所示

左侧：多选框是拖拽到提交栏组件中的组件
右侧：是通过提交栏组件的属性配置出来的
价格：提交栏组件会将价格除以100，所以使用时需要乘以100

提交栏组件在页面上默认不占高度，设置“生成占位元素”为是，才能在页面上有高度

动作栏（vant）商品导航（vantui）

商品导航组件用于展示两个一边是半圆形的按钮，运行效果如下图所示

动作栏组件支持添加导航按钮（上图中的红色按钮）和导航图标（上图中带图标的按钮），设计界面如下图所示

动作栏组件在页面上默认不占高度，设置“生成等高占位元素”为是，才能在页面上有高度

行列

行列组件是用弹性盒子实现的，用于在一行显示多个内容的组件，支持垂直居中，固定宽度，运行效果如下图所示