# 购物车入口按钮

## 介绍

进入购物车的入口按钮 （不适用于 `scroll-view`）

<img src="https://films-10014007.cos.ap-shanghai.myqcloud.com/mp-ip-commercialize/cart-btn.png" />

## 代码演示

### 引入组件

```json
{
  "usingComponents": {
    "free-cart-btn": "/components/cart-btn/index"
  }
}
```

### 基础用法

```html
<free-cart-btn show="{{ isShowCartBtn }}" info="{{ cartGoodsCount }}" />
```

在 `Page` 页面添加`onPageScroll`事件，滑动页面时，动态显示隐藏购物车入口按钮按钮

```js
data: {
  cartGoodsCount: 3,
  isShowCartBtn: false,
},
onPageScroll(e: WechatMiniprogram.ScrollOffsetCallbackResult) {
  if (e.scrollTop > 200) {
    this.setData({ isShow: true });
  } else {
    this.setData({ isShow: false});
  }
}
```

## API

### Props

| 参数   | 说明                             | 类型      | 默认值  |
| ------ | -------------------------------- | --------- | ------- | ----- |
| show   | 是否显示按钮                     | `boolean` | `true`  |
| dot    | 是否显示图标右上角小红点         | `boolean` | `false` |
| info   | 图标右上角文字提示               | `string   | number` | `99+` |
| color  | 图标颜色                         | `string`  | `#333`  |
| size   | 图标大小，单位为 rpx             | `string`  | `24`    |
| right  | 控制其显示位置, 距离页面右边距   | `number`  | `10`    |
| bottom | 控制其显示位置, 距离页面底部距离 | `number`  | `250`   |
| zIndex | 控制其元素显示的层级数           | `number`  | `100`   |