QuickEnter 快捷入口

用于首页宫格与滑动入口展示，支持多行分页、单行轮播和横向滑动布局。

演示

9:41

代码示例

<!-- 基本用法 -->
  <re-quick-enter :items="basicItems" @click-item="onBasicClickItem" />

<!-- 轮播展示 -->
  <re-quick-enter :items="items" :indicatorVisible="true" @click-item="onClickItem" />

<!-- 单行 -->
  <re-quick-enter :items="items" :rows="1" :indicatorVisible="true" @click-item="onClickItem" />

<!-- 滑动展示 -->
  <re-quick-enter slideMode="slide" :items="items" :rows="1" :slideVisibleCount="4.5" @click-item="onClickItem" />

<!-- 双行滑动展示 -->
  <re-quick-enter slideMode="slide" :items="items" :rows="2" :slideVisibleCount="4.5" @click-item="onClickItem" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-quick-enter />。

API

QuickEnter Props

名称类型默认值描述必传
itemsArray<QuickEnterItem>快捷入口数据N
columnsnumber5每行数量N
rowsnumber2展示行数N
indicatorVisiblebooleanfalse是否显示分页指示器N
slideModestring"swiper"多屏展示模式，可选 swiper / slideN
indicatorBgColorstring"rgba(0, 0, 0, 0.16)"指示器背景颜色N
indicatorActiveColorstring"#111827"指示器激活颜色N
iconSizenumber20图标尺寸N
slideVisibleCountnumber | string4.5slide 模式单屏可见数量，可设置为小数如 4.5N
customStylestring""自定义样式N

QuickEnter Events

名称参数描述
click-itemindex: number-

QuickEnter Slots

名称描述
--
ProductFeed 商品 Feed 流
商品流列表组件，支持单列双列布局、刷新场景和滚动加载更多。
SearchHistory 搜索历史
搜索历史展示组件，支持最近搜索、搜索发现、输入关键词联想、删除管理与返回箭头（单独搜索页场景）。