app开发使用vant组件之van-list

本篇给那些初试app开发的码农，大佬如果有建议，欢迎留言~~

首先开发app会有多种方式，html+各种框架，vue-cli脚手架+各种依赖。

脚手架的话，直接在vant官网教程里就有,vant官网地址Vant 3 - Mobile UI Components built on Vue

 上边是两种安装依赖方法，可自行去官网查看，这里有个问题需要说一下，vue3有可能你在创建项目的时候规定用es6写法，这个时候会报is notdefind，然后查找之后发现是vant里边有es5的写法，这个时候用npm uninstall vant卸载一下，然后

npm install vant@next --save

用这个方法升级到vue3能使用vant

html引用的话官网有说明，这里就不在细说了，我这边用的html+vue+vant写的移动端

废话不多说，上代码

HTML

<van-list v-model="loading" :immediate-check="false" :offset='10' :finished="finished" finished-text="没有更多了" @load="myLoad">

    <div class='flex_tab' v-for='val in list' @click='godetail(val)'>

      <div class='flex_left'>

          <div style='font-weight: bold;' class='font30'>{{val.title}}</div>

          <div class='font24 fontGray9'>{{val.create_time}}</div>

      </div>

      <div class='flex_img'>

          <img style="width: 100%" :src="basicUrl + val.cover_imgurl" alt="">

      </div>

     </div>

</van-list>

首先是immediate-check这个参数，代表是否在初始化时立即执行滚动位置检查，就是在进入页面是否直接加载一遍load函数，我一般都是关掉的，因为开启的话，进入页面会调用两遍list分页接口，具体情况看项目需要。

其次就是offset，这个根据官网的解释呢是滚动条与底部距离小于 offset 时触发 load 事件，一般默认的300，但是其实也不用那么大，100即可，为什么不是我写的10呢，因为要考虑到有些手机load加载之后正好卡到了offset的那个临界点，不会触发load了，所以最好还是调大一点。

model和finished就不多说了，官网解释的很详细，简单的概括一下就是loading是否还有数据要加载，finished就是是否已经加载完全部数据了，没加载完继续加载。

下面是获取数据接口的js

getlist() {

        var that = this; 

        var data = {

                page: 0,

                pagelimit: 8

        }

        post('你的接口地址', data, function(res) {

                    if(res.errno == 0) {

                        var rows = res.rows;

                        that.loading = false;

                        that.total = res.results;

                        if(rows == null || rows.length == 0) {

                            // 加载结束

                            that.finished = true;

                            return;

                        };

                        // 将新老数据合并

                        that.list = that.list.concat(rows);

                        // 如果列表数据条数>=总条数，不再触发滚动加载

                        if(that.list.length >= that.total) {

                            that.finished = true;

                        };

                    }

        })

}

// 翻页加载

myLoad() {

      var that = this;

       that.page++;

       that.getlist();

}

先判断接口是否有返回数据，如果有，那么和旧数据合并,如果没有，就直接完成，不在继续触发load了,myLoad是根据是否符合offset条件，如果超过offset的高度就会触发load函数用于达到翻页效果。

结尾：app开发的如果用html或者vue-cli的话，个人还是建议用vant，比较好用，如果你们用的其他框架或者其他UI的话，也可以看一下vant官网，看看是否符合你们项目的条件，毕竟，多会点总比少会点的要好很多~