百度智能小程序 关注

follow 关注

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

属性说明

示例 

在开发者工具中打开

代码示例

安装组件：

<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>

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);
    }
});

.con-demo {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-around;
    background: #666;
    height: 50px;
}

{
    "navigationBarTitleText": "标题",
    "usingComponents": {
        "c-follow": "@smt-ui/content-component/src/follow"
    }
}