- follow 关注
- 属性说明
- 示例
- 代码示例
- 代码示例
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 |
是 |
关注的状态 |
|
|
follow-text |
Array |
否 |
[‘关注’, ‘已关注’] |
关注按钮上的文案 |
|
is-show-toast |
Boolean |
否 |
true |
关注后的结果反馈是否弹出 toast 提示 |
|
toast-text |
Array |
否 |
[‘关注成功’, ‘已取消关注’] |
toast 文案，默认为关注成功、已取消关注 |
|
bind:follow |
EventHandle |
点击按钮事件 |
示例
跳转编辑工具
在开发者工具中打开
在 WEB IDE 中打开
扫码体验
代码示例
请使用百度APP扫码
代码示例
安装组件：
- SWAN
- JS
- CSS
- JSON
<view>关注</view><view class="con-demo"><c-followis-followed="{{isFollowed1}}"bind:follow="onFollow1"></c-follow><c-followbackground-color="white"follow-text="{{followText}}"is-followed="{{isFollowed2}}"bind:follow="onFollow2"></c-follow><c-followbackground-color="opacity"follow-text="{{followText2}}"is-followed="{{isFollowed4}}"bind:follow="onFollow4"></c-follow><c-followbackground-color="none"follow-text="{{followText}}"is-followed="{{isFollowed3}}"bind:follow="onFollow3"></c-follow></view><view class="con-demo"><c-followmode="icon"background-color="white"is-followed="{{isFollowed5}}"bind:follow="onFollow5"></c-follow><c-followmode="icon"is-followed="{{isFollowed6}}"bind:follow="onFollow6"></c-follow></view><view class="con-demo"><c-followmode="mixture"is-followed="{{isFollowed}}"bind:follow="onFollow"></c-follow></view>
