List 列表

提供 wx-list 和 wx-list-item 两个组件。

带说明列表

<wx-list title="带说明列表项">
  <wx-list-item title="标题文字" desc="说明文字"></wx-list-item>
  <wx-list-item title="标题文字" desc="说明文字"></wx-list-item>
</wx-list>

带图标列表

<wx-list title="带图标、说明列表项">
  <wx-list-item title="标题文字" desc="说明文字" :icon="icon"></wx-list-item>
  <wx-list-item title="标题文字" desc="说明文字" :icon="icon"></wx-list-item>
</wx-list>

<script>
import icon from "@/assets/picture.png";
export default {
  data() {
    return {
      icon
    };
  }
};
</script>

带链接、事件列表

<wx-list title="带链接、事件列表项">
  <wx-list-item title="事件回调" desc="说明文字" :icon="icon" @click="handleClick"></wx-list-item>
  <wx-list-item title="链接跳转" desc="说明文字" :icon="icon" :to="{path: '/'}"></wx-list-item>
</wx-list>

<script>
import icon from "@/assets/picture.png";
export default {
  data() {
    return {
      icon
    };
  },
  methods: {
    handleClick() {
      this.$toast("got!");
    }
  }
};
</script>

提示

wx-list-item 组件在绑定路由信息或事件的条件下，自动带出链接箭头

自定义列表项

<wx-list title="自定义列表项">
  <wx-list-item>
    <template #icon>
      <img :src="icon" style="width: 50px; height:50px; display: block; margin-right: 16px;" />
    </template>
    <template #default>
      <p>联系人名称</p>
      <p style="font-size: 13px; color: #888;">摘要信息</p>
    </template>
  </wx-list-item>
  <wx-list-item title="标题文字" desc="说明文字" @click="handleClick"></wx-list-item>
</wx-list>

<script>
import icon from "@/assets/picture.png";
export default {
  data() {
    return {
      icon
    };
  },
  methods: {
    handleClick() {
      this.$toast("got!");
    }
  }
};
</script>

List Attributes

参数	说明	类型	可选值	默认值
title	列表标题， 空值即不显示	String	-	-

List-item Attributes

参数	说明	类型	可选值	默认值
icon	列表项图标	String	-	-
title	列表项标题	String	-	-
desc	列表项说明	String	-	-
to	路由信息，配合 vue-router 使用	String/Object	-	-

List-item Events

事件名称	说明	回调参数
click	点击时触发，如设置了属性 to ，则优先路由跳转	event: Event

List-item Slots

插槽名称	说明
default	标题内容
icon	图标内容
desc	说明内容

列表