follow 关注
- 属性说明
- 示例
  - 代码示例

follow 关注

解释：关注组件，内容 / 用户关注组件。开发者可在小程序内配置关注组件，实现用户对小程序内容和消息的持续关注，可嵌套在原生组件内，自定义选择组件的样式和动效。

属性说明

属性名	类型	必填	默认值	说明
mode	String	否	text	关注按钮模式，有三种选择。 icon：仅有图标；text：文字版本；mixture：图标文字结合
background-color	String	否	blue	mode 为 mixture 时不支持自定义背景色，默认背景为蓝色；当且仅当 mode 为 text 时有以下 4 种按钮颜色可选 blue 、 white 、 opacity 、 none 。当且仅当 mode 为 icon 时有以下 2 种按钮颜色可选 blue 、 white
is-followed	Boolean	是		关注的状态
follow-text	Array	否	[‘关注’, ‘已关注’]	关注按钮上的文案
is-show-toast	Boolean	否	true	关注后的结果反馈是否弹出 toast 提示
toast-text	Array	否	[‘关注成功’, ‘已取消关注’]	toast 文案，默认为关注成功、已取消关注
bind:follow	EventHandle			点击按钮事件

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

安装组件：

SWAN
JS
CSS
JSON

<view>关注</view>
<view class="con-demo">
    <c-follow
        is-followed="{{isFollowed1}}"
        bind:follow="onFollow1">
    </c-follow>
    <c-follow
        background-color="white"
        follow-text="{{followText}}"
        is-followed="{{isFollowed2}}"
        bind:follow="onFollow2">
    </c-follow>
    <c-follow
        background-color="opacity"
        follow-text="{{followText2}}"
        is-followed="{{isFollowed4}}"
        bind:follow="onFollow4">
    </c-follow>
    <c-follow
        background-color="none"
        follow-text="{{followText}}"
        is-followed="{{isFollowed3}}"
        bind:follow="onFollow3">
    </c-follow>
</view>
<view class="con-demo">
    <c-follow
        mode="icon"
        background-color="white"
        is-followed="{{isFollowed5}}"
        bind:follow="onFollow5">
    </c-follow>
    <c-follow
        mode="icon"
        is-followed="{{isFollowed6}}"
        bind:follow="onFollow6">
    </c-follow>
</view>
<view class="con-demo">
    <c-follow
        mode="mixture"
        is-followed="{{isFollowed}}"
        bind:follow="onFollow">
    </c-follow>
</view>