SlugTeam

# List 动态列表

用于展示动态列表。

# 用法

# 基础用法

<smm-list :params="params" :login="login"></smm-list>
1

效果示例：

# 属性

# params

  • 类型：Object
  • 用法：
<smm-list
  :params="{ game: 'hyrzol', works_id: 290307001 }"
  :login="login"
></smm-list>
1
2
3
4

接口请求参数对象，包含：

参数名称 描述 类型 默认值 可选值
game 游戏标识，游戏官网域名前缀，如《火影忍者 OL》官网域名为 https://hyrzol.qq.com/，则其游戏标识为 hyrzol String
works_id 标签 id，当前短攻略内容的宿主 Number

# login

  • 类型：Object
  • 用法：
<smm-list
  :params="params"
  :login="{ type: 'msdk', msdk: '?areaid=2&roleid=2196891558&appid=1106467070&version=2.16.43i&timestamp=1537860303&sig=6ed1721186e29ec8c9f04ab91868be09&encode=2&algorithm=v2&user-agent=ios_sdk&openid=0A57A6D07931FD8C9AF3CA0FE9398A77&msdkEncodeParam=c6c2512fcbe34980d4ce46ca3ad0eed38f6aa87a923f1cea6b30e8d70794a342871298e93298e0a2aaf9f48d9887275ff6e4e987d46ffee665832d9d77e98820ca65a652083b6c4107a5fbff29d1b2eb5d6bb586491f4012c57e47ef5c9f8f357ca3be9f112fbffb6f6a6a1ed707e68a50b7df8390fe24e960a8770dcc58d919922690d8dda020ef8d7fb77fe2c7ae9d4ff739d4a1ef76a8784e1916b98202b53eba83826e9d4b716074dabf64ad1774' }"
></smm-list>
1
2
3
4

登录参数对象，包含：

参数名称 描述 类型 默认值 可选值
type 登录类型 String msdk
msdk MSDK 登录态，若 type 为 msdk，则该参数必填 String

# order

  • 类型：Number
  • 默认值：1
  • 用法：
<smm-list :order="2" :params="params" :login="login"></smm-list>
1

排序规则，可选值为：

可选值 描述
1 时间排序
2 热度排序（非赞同数）

# colors

  • 类型：Object
  • 默认值：{}
  • 用法：
<smm-list
  :params="params"
  :login="login"
  :colors="{ 1: 'rgba(238, 238, 238, 1)', 2: 'rgba(255, 236, 178, 1)', 3: 'rgba(170, 170, 170, 1)', 4: 'rgba(255, 236, 178, 1)', 6: 'rgba(61, 72, 90, 1)', 7: 'rgba(42, 53, 71, 0.8)', 8: 'rgba(66, 75, 93, 1)', 10: 'rgba(30, 39, 56, 1)' }"
></smm-list>
1
2
3
4
5

自定义主题色，优先级最高，可覆盖默认主题色与 SlugMoment.config.colors 设置的主题色。

# 事件

# click

  • 用法：
<body>
  <div class="slug-moment">
    <smm-list
      class="list"
      :params="params"
      :login="login"
      @click="click"
    ></smm-list>
  </div>
  <!-- ... -->
  <script>
    new Vue({
      el: '.slug-moment',
      data: {
        params: {
          // ...
        },
        login: {
          // ...
        },
      },
      methods: {
        click: function () {
          console.log('跳转详情页')
        },
      },
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

动态内容被点击时触发，点击后跳转至详情页。

  • 用法：
<body>
  <div class="slug-moment">
    <smm-list
      class="list"
      :params="params"
      :login="login"
      @menu="menu"
    ></smm-list>
  </div>
  <!-- ... -->
  <script>
    new Vue({
      el: '.slug-moment',
      data: {
        params: {
          // ...
        },
        login: {
          // ...
        },
      },
      methods: {
        menu: function () {
          console.log('选项菜单展开')
        },
      },
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

动态选项菜单按钮被点击时触发，点击后将展开选项菜单。

# total-change

  • 用法：
<body>
  <div class="slug-moment">
    <smm-list
      class="list"
      :params="params"
      :login="login"
      @total-change="totalChange"
    ></smm-list>
    <div>{{ total }}</div>
  </div>
  <!-- ... -->
  <script>
    new Vue({
      el: '.slug-moment',
      data: {
        total: 0,
        params: {
          // ...
        },
        login: {
          // ...
        },
      },
      methods: {
        totalChange: function (total) {
          this.total = total
        },
      },
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

动态总数变化时触发，监听函数参数：

参数名称 描述 类型
total 动态总数 Number

# vote

  • 用法：
<body>
  <div class="slug-moment">
    <smm-list
      class="list"
      :params="params"
      :login="login"
      @vote="vote"
    ></smm-list>
  </div>
  <!-- ... -->
  <script>
    new Vue({
      el: '.slug-moment',
      data: {
        params: {
          // ...
        },
        login: {
          // ...
        },
      },
      methods: {
        vote: function (option) {
          if (option == 1) {
            console.log('赞同')
          }
          if (option == 2) {
            console.log('反对')
          }
        },
      },
    })
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

动态投票区域被点击时触发，监听函数参数：

参数名称 描述 类型
option 投票类型：1（赞同），2（反对） Number

←