百度智能小程序 關(guān)注

follow 關(guān)注

解釋?zhuān)?關(guān)注組件，內(nèi)容/用戶關(guān)注組件。開(kāi)發(fā)者可在小程序內(nèi)配置關(guān)注組件，實(shí)現(xiàn)用戶對(duì)內(nèi)容和用戶的關(guān)注，可嵌套在原生組件內(nèi)，自定義選擇組件的樣式和動(dòng)效。

屬性說(shuō)明

示例 

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

代碼示例

安裝組件：

<view>關(guān)注</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: ['關(guān)注', '取消關(guān)注'],
        followText2: ['關(guān)注', '已經(jīng)取消關(guān)注']
    },
    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": "標(biāo)題",
    "usingComponents": {
        "c-follow": "@smt-ui/content-component/src/follow"
    }
}