ProductFeed 商品 Feed 流

商品流列表组件，支持单列双列布局、刷新场景和滚动加载更多。

演示

9:41

代码示例

<re-tabs :defaultValue="0">
  <re-tab-panel label="双列" :value="0">
  <re-product-feed :items="doubleItems" :hasMore="hasMoreDouble" @click="onDoubleClick" @image-click="onDoubleImageClick" @load-more="onLoadMoreDouble" />
  <re-tab-panel label="单列" :value="1">
  <re-product-feed :items="singleItems" :columns="1" :hasMore="hasMoreSingle" @click="onSingleClick" @image-click="onSingleImageClick" @load-more="onLoadMoreSingle" />
  <re-tab-panel label="刷新场景" :value="2">
  <re-product-feed :items="refreshItems" :hasMore="hasMoreRefresh" @click="onRefreshClick" @image-click="onRefreshImageClick" @load-more="onLoadMoreRefresh" />

引入

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

API

ProductFeed Props

名称	类型	默认值	描述	必传
items	`Array<ProductFeedItem>`		商品数据	N
columns	`number`	2	列数，可选 1 或 2	N
hasMore	`boolean`	true	是否还有更多数据	N
loadMoreText	`string`	"加载更多商品"	加载更多文案	N
finishedText	`string`	"没有更多了"	加载完成文案	N
customStyle	`string`	""	自定义样式	N

ProductFeed Events

名称	参数	描述
click	index: number	点击时触发
image-click	index: number	-
load-more	-	-

ProductFeed Slots

名称	描述
-	-

OrderRemark 订单备注

用于提交订单前补充备注信息，支持快捷标签、自定义文案和事件回调。

QuickEnter 快捷入口

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

内容锚点

演示
代码示例
引入
API