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 点击按钮事件

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 代码示例

安装组件:

npm install @smt-ui/content-component
    {
        "navigationBarTitleText": "标题",
        "usingComponents": {
            "c-follow": "@smt-ui/content-component/src/follow"
        }
    }
    
      <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;
      }