关注组件

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

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例

安装组件：

  1. npm install @smt-ui/content-component
  1. {    "navigationBarTitleText": "标题",    "usingComponents": {        "c-follow": "@smt-ui/content-component/src/follow"    }}
  1. <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>
  1. Page({    data: {        isFollowed: true,        followText: ['关注', '取消关注'],        followText2: ['关注', '已经取消关注']    },    onFollow() {        let isFollowed = this.data.isFollowed;        this.setData('isFollowed', !isFollowed);    },    onFollow1() {        let isFollowed = this.data.isFollowed1;        this.setData('isFollowed1', !isFollowed);    },    onFollow2() {        let isFollowed = this.data.isFollowed2;        this.setData('isFollowed2', !isFollowed);    },    onFollow3() {        let isFollowed = this.data.isFollowed3;        this.setData('isFollowed3', !isFollowed);    },    onFollow4() {        let isFollowed = this.data.isFollowed4;        this.setData('isFollowed4', !isFollowed);    },    onFollow5() {        let isFollowed = this.data.isFollowed5;        this.setData('isFollowed5', !isFollowed);    },    onFollow6() {        let isFollowed = this.data.isFollowed6;        this.setData('isFollowed6', !isFollowed);    }});
  1. .con-demo {    display: flex;    height: 80px;    align-items: center;    justify-content: space-around;    background: #666;    height: 50px;}