Vue插件—vant当中van-list的使用

Posted xbxxf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue插件—vant当中van-list的使用相关的知识,希望对你有一定的参考价值。

先看官网  点这里

1、安装

npm i vant -S

2、引入 在src/main.js里面引入 

import Vue from vue;
import { List } from vant;

Vue.use(List);

3、使用  teamplate

  //van-list  是必须带的标签,里面的标签可以自己加
  <van-list v-model="loading" :finished="finished" finished-text="没有更多啦" @load="load_more" class="publist" > <li v-for="(item,ing) of list" :key="ing">{{item.name}}</li> </van-list>

script

export default {
  name: Home,
  data(){
    return{
      list: [],
      loading: false,//加载状态
      finished: false,//是否加载
      page: 1,//页数
    limit:
15//条数 } }, methods:{ load_more: function() { this.page += 1;//页数+1 this.onLoad(); }, onLoad() { let data = { page: this.page, pageSize: this.limit } axios.post(api/test/xbxxf,data) .then(res => { if(res.data.code=200){ // 加载状态结束 this.loading = false; this.list = this.list.concat(res.data.data.list);//追加数据 if (res.data.data.page == res.data.data.pageNum || res.data.data.list.length == 0) { //数据全部加载完成 this.finished = true; }else{ this.finished = false; } } }) } } }

另外注意css,因为滑动加载,看你滑动的是不是当前模块,如果滑动的不是当前的模块,是父元素或者其他的元素,不会触发加载事件,也不会请求数据

 

以上是关于Vue插件—vant当中van-list的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue+Vant中van-list请求数据(数据请求调用公用方法)

APP开发-使用Vue3+vant+html5+ 实现相机拍照,选取相册图片,裁剪图片以及提取图片中的文字等功能

APP开发-使用Vue3+vant+html5+ 实现相机拍照,选取相册图片,裁剪图片以及提取图片中的文字等功能

vue-cli引入element和vant前端ui组件

vue中使用Vant

vant组件库在vue中的使用需要配置的哪些?