关注组件

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

属性说明

属性名类型必填默认值说明
modeString否text关注按钮模式，有三种选择。icon: 仅有图标; text: 文字版本; mixture: 图标文字结合
background-colorString否bluemode为mixture时不支持自定义背景色，默认背景为蓝色；当且仅当mode为text时有以下4种按钮颜色可选:blue; white; opacity; none。当且仅当mode为icon时有以下2种按钮颜色可选:blue; white;
is-followedBoolean是false关注的状态
follow-textArray否['关注', '已关注']关注按钮上的文案
is-show-toastBoolean否true关注后的结果反馈是否弹出toast提示
toast-textArray否['关注成功', '已取消关注']toast文案，默认为关注成功、已取消关注
bind:followEventHandle点击按钮事件

示例

在开发者工具中预览效果

扫码体验

关注组件 - 图1请使用百度APP扫码

代码示例

安装组件：

  1. npm install @smt-ui/content-component
  1. {
  2.     "navigationBarTitleText": "标题",
  3.     "usingComponents": {
  4.         "c-follow": "@smt-ui/content-component/src/follow"
  5.     }
  6. }
  1. <view>关注</view>
  2. <view class="con-demo">
  3.     <c-follow
  4.         is-followed="{{isFollowed1}}"
  5.         bind:follow="onFollow1">
  6.     </c-follow>
  8.     <c-follow
  9.         background-color="white"
  10.         follow-text="{{followText}}"
  11.         is-followed="{{isFollowed2}}"
  12.         bind:follow="onFollow2">
  13.     </c-follow>
  15.     <c-follow
  16.         background-color="opacity"
  17.         follow-text="{{followText2}}"
  18.         is-followed="{{isFollowed4}}"
  19.         bind:follow="onFollow4">
  20.     </c-follow>
  22.     <c-follow
  23.         background-color="none"
  24.         follow-text="{{followText}}"
  25.         is-followed="{{isFollowed3}}"
  26.         bind:follow="onFollow3">
  27.     </c-follow>
  28. </view>
  30. <view class="con-demo">
  31.     <c-follow
  32.         mode="icon"
  33.         background-color="white"
  34.         is-followed="{{isFollowed5}}"
  35.         bind:follow="onFollow5">
  36.     </c-follow>
  38.     <c-follow
  39.         mode="icon"
  40.         is-followed="{{isFollowed6}}"
  41.         bind:follow="onFollow6">
  42.     </c-follow>
  43. </view>
  45. <view class="con-demo">
  46.     <c-follow
  47.         mode="mixture"
  48.         is-followed="{{isFollowed}}"
  49.         bind:follow="onFollow">
  50.     </c-follow>
  51. </view>
  1. Page({
  2.     data: {
  3.         isFollowed: true,
  4.         followText: ['关注', '取消关注'],
  5.         followText2: ['关注', '已经取消关注']
  6.     },
  7.     onFollow() {
  8.         let isFollowed = this.data.isFollowed;
  9.         this.setData('isFollowed', !isFollowed);
  10.     },
  11.     onFollow1() {
  12.         let isFollowed = this.data.isFollowed1;
  13.         this.setData('isFollowed1', !isFollowed);
  14.     },
  15.     onFollow2() {
  16.         let isFollowed = this.data.isFollowed2;
  17.         this.setData('isFollowed2', !isFollowed);
  18.     },
  19.     onFollow3() {
  20.         let isFollowed = this.data.isFollowed3;
  21.         this.setData('isFollowed3', !isFollowed);
  22.     },
  23.     onFollow4() {
  24.         let isFollowed = this.data.isFollowed4;
  25.         this.setData('isFollowed4', !isFollowed);
  26.     },
  27.     onFollow5() {
  28.         let isFollowed = this.data.isFollowed5;
  29.         this.setData('isFollowed5', !isFollowed);
  30.     },
  31.     onFollow6() {
  32.         let isFollowed = this.data.isFollowed6;
  33.         this.setData('isFollowed6', !isFollowed);
  34.     }
  35. });
  1. .con-demo {
  2.     display: flex;
  3.     height: 80px;
  4.     align-items: center;
  5.     justify-content: space-around;
  6.     background: #666;
  7.     height: 50px;
  8. }