GoodsAction 商品导航

介绍

用于为商品相关操作提供便捷交互。

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-goods-action": "@vant/weapp/goods-action/index",
  3. "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
  4. "van-goods-action-button": "@vant/weapp/goods-action-button/index"
  5. }

Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手

代码演示

基础用法

  1. <van-goods-action>
  2. <van-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
  3. <van-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
  4. <van-goods-action-button
  5. text="加入购物车"
  6. type="warning"
  7. bind:click="onClickButton"
  8. />
  9. <van-goods-action-button text="立即购买" bind:click="onClickButton" />
  10. </van-goods-action>
  1. Page({
  2. onClickIcon() {
  3. Toast('点击图标');
  4. },
  5. onClickButton() {
  6. Toast('点击按钮');
  7. },
  8. });

提示信息

设置dot属性后,会在图标右上角展示一个小红点。设置info属性后,会在图标右上角展示相应的徽标。

  1. <van-goods-action>
  2. <van-goods-action-icon icon="chat-o" text="客服" dot />
  3. <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  4. <van-goods-action-icon icon="shop-o" text="店铺" />
  5. <van-goods-action-button text="加入购物车" type="warning" />
  6. <van-goods-action-button text="立即购买" />
  7. </van-goods-action>

自定义按钮颜色

通过color属性可以自定义按钮的颜色,支持传入linear-gradient渐变色。

  1. <van-goods-action>
  2. <van-goods-action-icon icon="chat-o" text="客服" />
  3. <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  4. <van-goods-action-icon icon="shop-o" text="店铺" />
  5. <van-goods-action-button color="#be99ff" text="加入购物车" type="warning" />
  6. <van-goods-action-button color="#7232dd" text="立即购买" />
  7. </van-goods-action>

朴素按钮

通过plain属性将按钮设置为朴素按钮,朴素按钮的文字为按钮颜色,背景为白色。

  1. <van-goods-action>
  2. <van-goods-action-icon icon="chat-o" text="客服" />
  3. <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
  4. <van-goods-action-icon icon="shop-o" text="店铺" />
  5. <van-goods-action-button color="#7232dd" text="加入购物" type="warning" />
  6. <van-goods-action-button plain color="#7232dd" text="立即购买" />
  7. </van-goods-action>

API

GoodsAction Props

参数说明类型默认值
safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrue

GoodsActionIcon Props

参数说明类型默认值
text按钮文字string-
icon图标类型,可选值见icon组件string-
info图标右上角提示信息string | number-
url点击后跳转的链接地址string-
link-type链接跳转类型,可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力,具体支持可参考 微信官方文档string-
app-parameter打开 APP 时,向 APP 传递的参数string-
lang指定返回用户信息的语言,zh_CN 简体中文,
zh_TW 繁体中文,en 英文
stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse
class-prefix v1.10.1类名前缀stringvan-icon

GoodsActionButton Props

参数说明类型默认值
text按钮文字string-
color按钮颜色,支持传入 linear-gradient 渐变色string-
url点击后跳转的链接地址string-
link-type链接跳转类型,可选值为 redirectTo switchTab reLaunchstringnavigateTo
id标识符string-
type按钮类型,可选值为 primary warning dangerstringdanger
plain是否为朴素按钮booleanfalse
size按钮尺寸,可选值为 normal large small ministringnormal
disabled是否禁用按钮booleanfalse
loading是否显示为加载状态booleanfalse
open-type微信开放能力,具体支持可参考 微信官方文档string-
app-parameter打开 APP 时,向 APP 传递的参数string-
lang指定返回用户信息的语言,zh_CN 简体中文,
zh_TW 繁体中文,en 英文
stringen
session-from会话来源string-
send-message-title会话内消息卡片标题string当前标题
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径
send-message-imgsendMessageImgstring截图
show-message-card显示会话内消息卡片stringfalse

Events

事件名说明参数
bind:click按钮点击事件回调-

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionButton Slot

名称说明
-按钮显示内容

GoodsActionIcon 外部样式类

类名说明
icon-class图标样式类
text-class文字样式类

GoodsActionButton 外部样式类

类名说明
custom-class根节点样式类

GoodsAction 商品导航 - 图1