# GoodsAction 商品导航


# 引入

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

"usingComponents": {
   "lin-goods-action": "/dist/goods-action/index",
   "lin-goods-action-icon": "/dist/goods-action-icon/index",
   "lin-goods-action-button": "/dist/goods-action-button/index"
}

# 基础用法

代码示例
<lin-goods-action safeAreaInsetBottom='{ {false}}'>
  <lin-goods-action-icon icon="chat-o" text="客服" bind:click="onClickIcon" />
  <lin-goods-action-icon icon="cart-o" text="购物车" bind:click="onClickIcon" />
  <lin-goods-action-button
    text="加入购物车"
    type="warning"
    bind:click="onClickButton"
  />
  <lin-goods-action-button text="立即购买" bind:click="onClickButton" />
</lin-goods-action>
Page({
  onClickIcon() {
    wx.showToast({
      title: "点击图标",
      icon: "none",
    });
  },
  onClickButton() {
    wx.showToast({
      title: "点击按钮",
      icon: "none",
    });
  },
});

# 提示信息

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

代码示例
<lin-goods-action safeAreaInsetBottom='{ {false}}'>
  <lin-goods-action-icon
    bind:click="onClickIcon"
    icon="chat-o"
    text="客服"
    dot
  />
  <lin-goods-action-icon
    bind:click="onClickIcon"
    icon="cart-o"
    text="购物车"
    info="5"
  />
  <lin-goods-action-icon bind:click="onClickIcon" icon="shop-o" text="店铺" />
  <lin-goods-action-button
    bind:click="onClickButton"
    text="加入购物车"
    type="warning"
  />
  <lin-goods-action-button bind:click="onClickButton" text="立即购买" />
</lin-goods-action>
Page({
  onClickIcon() {
    wx.showToast({
      title: "点击图标",
      icon: "none",
    });
  },
  onClickButton() {
    wx.showToast({
      title: "点击按钮",
      icon: "none",
    });
  },
});

# 自定义按钮颜色

通过color属性可以自定义按钮的颜色

代码示例
<lin-goods-action safeAreaInsetBottom='{ {false}}'>
  <lin-goods-action-icon bind:click="onClickIcon" icon="chat-o" text="客服" />
  <lin-goods-action-icon
    bind:click="onClickIcon"
    icon="cart-o"
    text="购物车"
    info="5"
  />
  <lin-goods-action-icon bind:click="onClickIcon" icon="shop-o" text="店铺" />
  <lin-goods-action-button
    bind:click="onClickButton"
    color="#be99ff"
    text="加入购物车"
    type="warning"
  />
  <lin-goods-action-button
    bind:click="onClickButton"
    color="#7232dd"
    text="立即购买"
  />
</lin-goods-action>
Page({
  onClickIcon() {
    wx.showToast({
      title: "点击图标",
      icon: "none",
    });
  },
  onClickButton() {
    wx.showToast({
      title: "点击按钮",
      icon: "none",
    });
  },
});

# 朴素按钮

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

代码示例
<lin-goods-action safeAreaInsetBottom='{ {false}}'>
  <lin-goods-action-icon bind:click="onClickIcon" icon="chat-o" text="客服" />
  <lin-goods-action-icon
    bind:click="onClickIcon"
    icon="cart-o"
    text="购物车"
    info="5"
  />
  <lin-goods-action-icon bind:click="onClickIcon" icon="shop-o" text="店铺" />
  <lin-goods-action-button
    bind:click="onClickButton"
    color="#7232dd"
    text="加入购物"
    type="warning"
  />
  <lin-goods-action-button
    bind:click="onClickButton"
    plain
    color="#7232dd"
    text="立即购买"
  />
</lin-goods-action>
Page({
  onClickIcon() {
    wx.showToast({
      title: "点击图标",
      icon: "none",
    });
  },
  onClickButton() {
    wx.showToast({
      title: "点击按钮",
      icon: "none",
    });
  },
});

# GoodsAction 属性

参数 说明 类型 可选值 默认值
safeAreaInsetBottom 是否为 iPhoneX 留出底部安全距离 Boolean true

# GoodsAction 外部样式类

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

# GoodsActionIcon 属性

参数 说明 类型 可选值 默认值
text 按钮文字 String
icon 图标名称 String
info 图标右上角提示信息 String, Number
dot 是否显示右上角小红点 Boolean false
url 点击后跳转的链接地址 String
loading 是否显示为加载状态 Boolean false
disabled 是否禁用按钮 Boolean false
linkType 链接跳转类型 String navigateTo, redirectTo, switchTab, reLaunch navigateTo
id 标识符 String
lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 String en
businessId 客服消息子商户 id Number
sessionFrom 会话来源 String
sendMessageTitle 会话内消息卡片标题 String 当前标题
sendMessagePath 会话内消息卡片点击跳转小程序路径 String 当前分享路径
sendMessageImg sendMessageImg String 截图
showMessageCard 显示会话内消息卡片 Boolean false
appParameter 打开 APP 时,向 APP 传递的参数 String
openType 微信开放能力,具体支持可参考 微信官方文档 (opens new window) String

# GoodsActionIcon 事件

事件名 说明 参数
bind:click 按钮点击事件回调
bind:getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的 detail 中获取到的值同 wx.getUserInfo event
bind:contact 客服消息回调 event
bind:getphonenumber 获取用户手机号回调 event
bind:error 当使用开放能力时,发生错误的回调 event
bind:opensetting 在打开授权设置页后回调 event
bind:launchapp 打开 APP 成功的回调 event

# GoodsActionIcon 插槽

插槽名称 说明
icon 自定义图标

# GoodsActionIcon 外部样式类

类名 说明
custom-class 根节点样式类
icon-class 图标样式类
text-class 文本样式类

# GoodsActionButton 属性

参数 说明 类型 可选值 默认值
text 按钮文字 String
color 按钮颜色 String
loading 是否显示为加载状态 Boolean false
disabled 是否禁用按钮 Boolean false
plain 是否为朴素按钮 Boolean false
type 按钮类型 String primary, success, info, warning, danger, default, success danger
url 点击后跳转的链接地址 String danger
linkType 链接跳转类型 String navigateTo, redirectTo, switchTab, reLaunch navigateTo
id 标识符 String
lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 String en
businessId 客服消息子商户 id Number
sessionFrom 会话来源 String
sendMessageTitle 会话内消息卡片标题 String 当前标题
sendMessagePath 会话内消息卡片点击跳转小程序路径 String 当前分享路径
sendMessageImg sendMessageImg String 截图
showMessageCard 显示会话内消息卡片 Boolean false
appParameter 打开 APP 时,向 APP 传递的参数 String
openType 微信开放能力,具体支持可参考 微信官方文档 (opens new window) String

# GoodsActionButton 事件

事件名 说明 参数
bind:click 按钮点击事件回调
bind:getuserinfo 用户点击该按钮时,会返回获取到的用户信息,从返回参数的 detail 中获取到的值同 wx.getUserInfo event
bind:contact 客服消息回调 event
bind:getphonenumber 获取用户手机号回调 event
bind:error 当使用开放能力时,发生错误的回调 event
bind:opensetting 在打开授权设置页后回调 event
bind:launchapp 打开 APP 成功的回调 event

# GoodsActionButton 外部样式类

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