GoodsAction 商品导航

引入

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

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

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

代码演示

基础用法

  1. <van-goods-action>
  2. <van-goods-action-icon
  3. icon="chat-o"
  4. text="客服"
  5. bind:click="onClickIcon"
  6. />
  7. <van-goods-action-icon
  8. icon="cart-o"
  9. text="购物车"
  10. bind:click="onClickIcon"
  11. />
  12. <van-goods-action-button
  13. text="加入购物车"
  14. type="warning"
  15. bind:click="onClickButton"
  16. />
  17. <van-goods-action-button
  18. text="立即购买"
  19. bind:click="onClickButton"
  20. />
  21. </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指定返回用户信息的语言,zhCN 简体中文,zh_TW 繁体中文,en 英文_stringen-
session-from会话来源string--
send-message-title会话内消息卡片标题string当前标题-
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径-
send-message-imgsendMessageImgstring截图-
show-message-card显示会话内消息卡片stringfalse-

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指定返回用户信息的语言,zhCN 简体中文,zh_TW 繁体中文,en 英文_stringen-
session-from会话来源string--
send-message-title会话内消息卡片标题string当前标题-
send-message-path会话内消息卡片点击跳转小程序路径string当前分享路径-
send-message-imgsendMessageImgstring截图-
show-message-card显示会话内消息卡片stringfalse-

Events

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

GoodsActionIcon Slot

名称说明
icon自定义图标

GoodsActionIcon 外部样式类

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

GoodsActionButton 外部样式类

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

GoodsAction 商品导航 - 图1