title: 关注组件 header: develop nav: extended

sidebar: concern

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

属性说明：

属性名 类型 必填 默认值 说明
mode String 否 text 关注按钮模式，有三种选择。icon: 仅有图标; text: 文字版本; mixture: 图表文字结合
background-color String 否 blue 当且仅当mode为text时有以下4种按钮颜色可选:blue; white; opacity; none。当且仅当mode为icon时有以下2种按钮颜色可选:blue; white;
is-concerned Boolean 是 false 关注的状态
concern-text Array 否 [‘关注’, ‘已关注’] 关注按钮上的文案
is-show-toast Boolean 否 true 关注后的结果反馈是否弹出toast提示
toast-text Array 否 [‘关注成功’, ‘已取消关注’] toast文案，默认为关注成功、已取消关注

代码示例

安装组件：

  1. npm install @smt-ui/content-component

在 页面json 文件中：

  1. {
  2.     "navigationBarTitleText": "标题",
  3.     "usingComponents": {
  4.         "c-concern": "@smt-ui/content-component/src/concern"
  5.     }
  6. }

在 swan 文件中：

  1. <view>关注</view>
  2. <view class="con-demo">
  3.     <c-concern
  4.         is-concerned="{{isConcerned1}}"
  5.         bind:concern="onConcern1">
  6.     </c-concern>
  8.     <c-concern
  9.         background-color="white"
  10.         concern-text="{{concernText}}"
  11.         is-concerned="{{isConcerned2}}"
  12.         bind:concern="onConcern2">
  13.     </c-concern>
  15.     <c-concern
  16.         background-color="opacity"
  17.         concern-text="{{concernText2}}"
  18.         is-concerned="{{isConcerned4}}"
  19.         bind:concern="onConcern4">
  20.     </c-concern>
  22.     <c-concern
  23.         background-color="none"
  24.         concern-text="{{concernText}}"
  25.         is-concerned="{{isConcerned3}}"
  26.         bind:concern="onConcern3">
  27.     </c-concern>
  28. </view>
  30. <view class="con-demo">
  31.     <c-concern
  32.         mode="icon"
  33.         background-color="white"
  34.         is-concerned="{{isConcerned5}}"
  35.         bind:concern="onConcern5">
  36.     </c-concern>
  38.     <c-concern
  39.         mode="icon"
  40.         is-concerned="{{isConcerned6}}"
  41.         bind:concern="onConcern6">
  42.     </c-concern>
  43. </view>
  45. <view class="con-demo">
  46.     <c-concern
  47.         mode="mixture"
  48.         is-concerned="{{isConcerned}}"
  49.         bind:concern="onConcern">
  50.     </c-concern>
  51. </view>

在 js 文件中：

  1. Page({
  2.     data: {
  3.         isConcerned: true,
  4.         concernText: ['关注', '取消关注'],
  5.         concernText2: ['关注', '已经取消关注']
  6.     },
  7.     onConcern() {
  8.         let isConcerned = this.data.isConcerned;
  9.         this.setData('isConcerned', !isConcerned);
  10.     },
  11.     onConcern1() {
  12.         let isConcerned = this.data.isConcerned1;
  13.         this.setData('isConcerned1', !isConcerned);
  14.     },
  15.     onConcern2() {
  16.         let isConcerned = this.data.isConcerned2;
  17.         this.setData('isConcerned2', !isConcerned);
  18.     },
  19.     onConcern3() {
  20.         let isConcerned = this.data.isConcerned3;
  21.         this.setData('isConcerned3', !isConcerned);
  22.     },
  23.     onConcern4() {
  24.         let isConcerned = this.data.isConcerned4;
  25.         this.setData('isConcerned4', !isConcerned);
  26.     },
  27.     onConcern5() {
  28.         let isConcerned = this.data.isConcerned5;
  29.         this.setData('isConcerned5', !isConcerned);
  30.     },
  31.     onConcern6() {
  32.         let isConcerned = this.data.isConcerned6;
  33.         this.setData('isConcerned6', !isConcerned);
  34.     }
  35. });

在 css 文件中：

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