百度智能小程序 关注
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 | 是 | false | 关注的状态 |
follow-text | Array | 否 | ['关注', '已关注'] | 关注按钮上的文案 |
is-show-toast | Boolean | 否 | true | 关注后的结果反馈是否弹出 toast 提示 |
toast-text | Array | 否 | ['关注成功', '已取消关注'] | toast 文案，默认为关注成功、已取消关注。 |
bind:follow | EventHandle | 点击按钮事件 |
示例
代码示例
安装组件：
<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"
}
}