📋 导航&多Tab&精选商品Tab优化原型 Tab 切换商品图 / 场景图与每行个数 · 悬停图片可放大 平台:
返回
PC端
M端
页面结构
  • ▶🛒商品卡片 💾 👁 📄 🗑
    属性面板
    组件样式
    功能设置
    积分加价购
    图片展示折扣标识
    点击图片放大本次新增
    点击图片、标题跳转商品详情页
    按钮设置
    样式与渠道
    *展示渠道
    (用于控制组件在不同渠道下的可见性)
    组件背景颜色
    间距配置
    电脑
    手机
    左
    右
    左
    右
    左
    右
    左
    右
    选择产品
    商品信息
    电脑
    手机
    文件编辑视图插入格式工具
    B I U ⋯
    标签设置
    商品标签
    参数标签
    标签背景颜色
    颜色设置
    实价颜色
    划线价颜色
    卡片背景色
    留空则使用默认白色背景
    *展示渠道
    (用于控制组件在不同渠道下的可见性)
    套件组件-后台
    返回
    PC端
    M端
    页面结构
    • ▶🖼️特征图组件
      • ◆细节图1
      • ◆细节图2
      • ◆细节图3
    属性面板
    渠道
    *展示渠道
    (用于控制组件在不同渠道下的可见性)
    组件背景颜色
    间距配置
    电脑
    手机
    左
    右
    左
    右
    图片配置
    + 上传
    + 上传视频
    本次新增
    + 上传
    + 上传视频
    本次新增
    + 上传
    + 上传
    文本信息
    按钮设置
    用户登录后才能跳转
    样式与渠道
    卡片背景色
    留空则使用默认白色背景
    *展示渠道
    删除组件

    Pocket 系列 · 配件选购

    向下滚动页面,观察 全局导航 → 一级导航 → 二级导航 → 下一个一级导航 的吸顶接力

    一级导航一 · 第一个二级导航

    Pocket 3 / 4

    配件按类目浏览,二级导航在模块内持续吸顶

    一级导航一 · 第二个二级导航

    Pocket 4 Pro

    滚出上一个模块后,第二个二级导航接管吸顶

    一级导航一 · 第三个二级导航

    Pocket 系列周边

    本模块滚完,一级导航一的全部内容即完成,随后由一级导航二接管吸顶

    一级导航二 · 第一个二级导航

    Luna Ultra 主机与配件

    一级导航二已接管吸顶,它自己的二级导航在本模块内吸顶

    一级导航二 · 第二个二级导航

    Live Kits 直播套装

    同一一级导航下的多个二级导航依次接力吸顶

    交互说明

    1. 全局导航:配置项「吸顶时隐藏导航菜单」选择「显示」时吸顶常驻;选择「隐藏」时随页面滚出,不再占位。
    2. 一级导航:页面内可能存在多个,各自只在自己的区块范围内吸顶;全局导航隐藏时吸顶到页面最顶部,否则吸在全局导航下方。选项与页内二级导航模块一一对应(第 1 项对应第 1 个模块,以此类推),点击可定位,滚动时高亮跟随当前模块。
    3. 多个一级导航接力:当第一个一级导航下属的模块全部滚完(区块底边到达吸顶位),一级导航一退出,第二个一级导航接管吸顶,其对应的二级导航在其模块进入时继续接管。
    4. 二级导航:页面内存在多个,仅在所属模块范围内吸顶;滚出该模块即退出,由下一个模块的二级导航接管。

    提示:可在顶部原型导航栏切换「显示 / 隐藏」,观察两种吸顶状态下的层叠位置差异。

    组件
    导航栏 · 三种 Tab 样式对照

    样式一 · 按钮 Tab

    已有样式

    胶囊按钮平铺,选中项深色填充、其余白底描边

    样式二 · 下划线 Tab

    已有样式

    纯文字 + 底部短线指示当前项,无底色

    样式三 · 分段胶囊 Tab

    本次新增

    灰色胶囊容器包裹全部 Tab,选中项化为黑色实心胶囊

    同一样式:部分 Tab 带标签

    返回
    PC端
    M端
    页面结构
    • ▶☰导航栏
    • ▶▦多tab容器
    • ▶🛒精选商品tab组件
    smallrig.com / pocket-4-pro
    导航栏:此版本增加分段胶囊tab样式,吸顶功能已有
    导航栏
    Tab默认颜色Tab背景颜色本次新增
    Tab默认文字颜色
    Tab hover颜色
    Tab hover文字颜色
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    电脑
    手机
    🗑 删除组件
    Tab栏吸顶悬浮本次新增
    Tab默认颜色Tab背景颜色本次新增
    Tab默认文字颜色
    Tab hover颜色
    Tab hover文字颜色
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    电脑
    手机
    🗑 删除组件
    是否吸顶本次新增
    Tab默认颜色Tab背景颜色本次新增
    Tab默认文字颜色
    Tab hover颜色
    Tab hover文字颜色
    展开 / 收起按钮本次新增
    按钮背景颜色
    按钮字体颜色
    ▼已有配置
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    电脑
    手机
    🗑 删除组件
    返回
    PC端
    M端
    页面结构
    🎨主题设置
    • ▶▦多tab容器
    • ▶☰导航组件
    • ▶🛒精选商品Tab组件
    smallrig.com / pocket-4-pro
    SmallRig Products Solutions Community Support

    Pocket 配件

    向下滚动 → Tab 栏在组件内吸顶悬浮

    全部配件 Cages Power Cases Audio
    多tab容器内的后续内容(继续向下滚动验证吸顶)
    SmallRig Products Solutions Community Support

    Pocket 4 Pro

    一级导航按「导航固定方式」吸顶,二级导航在其下方继续吸顶

    Pocket 3 / 4Pocket 4 ProPocket 系列周边FAQ
    全部MountsFiltersCasesPower
    模块后续内容:继续向下滚动观察一级 / 二级导航的吸顶位置

    精选商品 Tab

    开启「是否吸顶」后,Tab 栏在组件内吸顶

    全部新品热卖套装
    精选商品 Tab 组件内的后续内容
    多tab容器
    主题背景
    PC端图片:图片建议宽度【1920】px;高度建议大于1080px
    +上传
    m端图片:图片建议宽度【750】px;高度建议大于1080px
    +上传
    Tab默认文字颜色
    Tab hover文字颜色
    Tab默认颜色
    Tab hover颜色
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    电脑
    手机
    🗑 删除组件
    Tab默认颜色
    Tab默认文字颜色
    Tab hover颜色
    Tab hover文字颜色
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    电脑
    手机
    🗑 删除组件
    Tab默认颜色
    Tab默认文字颜色
    Tab hover颜色
    Tab hover文字颜色
    新增配置
    按钮背景颜色
    按钮字体颜色
    *展示渠道(用于控制组件在不同渠道下的可见性)
    全选
    组件背景颜色
    电脑
    手机
    🗑 删除组件