百度智能小程序 關注

follow 關注

解釋： 關注組件，內容/用戶關注組件。開發(fā)者可在小程序內配置關注組件，實現(xiàn)用戶對內容和用戶的關注，可嵌套在原生組件內，自定義選擇組件的樣式和動效。

屬性說明

示例 

在開發(fā)者工具中打開

代碼示例

安裝組件：

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