Canvas 介绍

Appearance

v-list-view ​

介绍

瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

预览

引入

方式请参考组件用法 。

代码演示 ​

基础用法

List 组件通过loading和finished两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

js
<v-list-view
  v-model:loading="loading"
  :finished="finished"
  @load="onLoad"
>
  <v-list-item/>
</v-list-view>

js
import { ref } from 'vue';

export default {
  setup() {
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);

    const onLoad = () => {
      setTimeout(() => {

        for (let i = 0; i < 10; i++) {
          list.value.push(list.value.length + 1);
        }
        loading.value = false;

        if (list.value.length >= 40) {
          finished.value = true;
        }
      }, 1000);
    };
    return {
      list,
      onLoad,
      loading,
      finished,
    };
  },
};

自定义列数

默认一行展示四个格子，可以通过 column-num 自定义列数。
可以通过 gutter 自定义格子间距。

js
<v-list-view :column-num="3" :gutter="20" >
</v-list-view>

获取item 绑定的数据

通过调用v-list-item 的 getData 方法获取对应数据

js
<v-list-view>
  <v-list-item @enter="onItemEnter"/>
</v-list-view>

js
import { ref } from 'vue';

export default {
  setup() {
    const onItemEnter = (evt) => {
      const target = event.target;
      const itemData = target.getData();
      console.log("=============onItemEnter:",itemData);
      return;
    };
    return {
      onItemEnter
    };
  },
};

list-item 带入数据

代码中的v-list-item图形并不会直接挂载。而是会被序列成一组数据。因此list-item图形需要显示的数据可以通过模版字符串带入。组件内部会把对应下标的数据命名为item，使用模版字符串获取item下的数据
v-list-item实际挂载数量基于内部动态计算（可视区域最多显示个数），并不受传入data数组数据影长度响。因此尽量不要直接去操作已经挂载的v-list-item节点。

js
 <v-list-view :data="data">
  <v-list-item @enter="onItemClick">
    <v-text :config="textConfig"></v-text>
    <v-image :config="imageConfig"></v-image>
  </v-list-item>
 </v-list-view>

js
import { ref } from 'vue';

export default {
  setup() {
    const data = ref([
      {
        title:"星期一",
        url:"http://qianjiayue.com/qjy.jpg"
      }, {
        title:"星期二",
        url:"http://qianjiayue.com/qjy.jpg"
      }
    ])
    const textConfig = ref({
      x: 0,
      y: 0,
      fill: '#fff',
      text: '${item.title}'          // 获取对应下标数据的 title
    });

    const imageConfig = ref({
      x: 0,
      y: 0,
      url: '${item.url}'            // 获取对应下标数据的 url  *图片会被自动加载
    });

    const onItemClick = (index)=>{
      console.log('ItemClick 下标:'+index);
    }
    return {
      data,
      textConfig,
      imageConfig,
      onItemClick，
    };
  },
};

API ​

list-view Props

参数说明类型默认值
v-model:loading是否处于加载状态
加载过程中不触发load 事件		booleanfalse
finished是否已加载完成
加载完成后不再触发load事件		booleanfalse
offsetBottom滚动条与底部距离小于offsetBottom时触发load事件number / string300
data数据array[]
column-num列数number/string1
gutter格子之间的间距number/string0
center是否将格子内容居中显示Booleantrue
direction格子内容排列的方向，可选值为horizontal none
设置none时 center 属性将失效		stringvertical
config支持全部v-group属性object--

list-view Events

事件名说明回调参数
load滚动条与底部距离小于 offsetBottom 时触发-

list-item Props

参数说明类型默认值
type目前Item只支持单一模式（暂不支持，保留字段）string''
config支持全部v-group属性object--

list-item Events

事件名说明回调参数
enterlist-item click/enter时触发event object
onFocuslist-item focus 时触发event object

list-item Function

事件名说明返回参数
getData获取item绑定的数据item data