• Vue移动端上拉加载更多实现请求分页数据


    参考:

    https://www.jianshu.com/p/c4abab8c1ba6

    https://www.cnblogs.com/lucide/p/13686536.html

    1. 安装"vue-infinite-scroll": "^2.0.2",

    2. 在main.js 引入

    import infiniteScroll from 'vue-infinite-scroll'
    Vue.use(infiniteScroll)

    3. 代码实现:

    <template>
      <div id="app">
        <div class="authorization_box" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
               infinite-scroll-distance="10">
               <!-- 循环数据列表 -->
                  <div class="list" v-for="(item,index) in datalist" :key="index">
                      <div>{{item}}</div>
                  </div>
                  <!-- 展示“正在加载、已无数据、加载失败” -->
                  <div class="l-load">{{ loadTxt[loadKey] }}</div>
              </div>
      </div>
    
    </template>
    <script type="text/javascript">
      export default{
        name: 'App4',
        components: {
    
        },
        data() {
                return {
                    page: 1,//当前页
                    total: 0,//总数据数量
                    pageSize: 10,//每页几个
                    loadTxt: {
                        more: "正在加载...",
                        none: "没有更多了~",
                        err: "加载失败~"
                    },
                    loadKey: "none",
                    datalist: [],//数据列表
                    loading: false,
                    dataMax:0
                };
            },
            mounted() {
                this.getWithdrawalList();//一进入页面就调用获取数据的方法
            },
            methods: {
                getWithdrawalList() {
                  console.log("进入getWithdrawalList");
                    var _this = this;
                    this.loadKey = "more";//把展示改为"正在加载..."
                    //调用获取数据的接口,这里是用封装的axios
                    // record({
                    //     "pageIndex": _this.page,
                    //     "pageSize": _this.pageSize
                    // }).then(res => {
                    //     if (res.data.code == 200) {
                    //         var info = res.data.content || null;
                    //         if (info) {
                    //             _this.total = info.count;
                    //             var data = info.list || [];
                    //             _this.datalist = _this.datalist.concat(data);
                    //             if (_this.total == _this.datalist.length) {
                    //                 _this.loadKey = "none";
                    //             }
                    //         } else {
                    //             _this.loadKey = "err";
                    //         }
                    //     }
                    // });
    
                    setTimeout(function(){
    
                      for(let j=_this.dataMax, len = 10; j<len+_this.dataMax;j++){
                        _this.datalist.push(j)
                      }
                      _this.dataMax+=10;
                      _this.total = 32;
                      if (_this.total < _this.datalist.length) {//这里我假设数据加载完了
                          _this.loadKey = "none";
                          this.loading = true
                      }
                      // console.log(_this.total);
                      // _this.loadKey = "none";
                    },1000);
    
                },
                loadMore() {
                    console.log("进入loadMore 要在手机上才有效果");
                    let page = this.page;
                    let size = this.pageSize;
                    let total = this.total;
                    let length = this.datalist.length;
                    let num = page * size;
    
                    if (num < total && num === length) {
                      console.log("loadMore......1111");
                        ++this.page;
                        this.getWithdrawalList();
                    }
                },
            }
      }
    </script>
    
    <style media="screen">
    .authorization_box {
           100%;
          background-color: #f6f6f6;
          padding: 0.5rem 1rem 1rem;
      }
      .list{
           100%;
          height: 2.5rem;
          border: 1px solid #ccc;
          margin-bottom: 0.5rem;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      .l-load {
          text-align: center;
          font-size: 0.625rem;
          color: #aaa;
          margin-top: 1rem;
      }
    </style>
    
    此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935. 我的gitHub: (学习代码都在gitHub) https://github.com/nwgdegitHub/
  • 相关阅读:
    js字符串使用占位符拼接
    C#解析json字符串总是多出双引号的原因分析及解决办法
    JS 正则验证字符串中是否含有数字
    不错的MVC文章
    Js 更换html同一父元素下子元素的位置
    团队任务个人博客--20160426
    《构建之法》阅读笔记3
    团队任务个人博客20160425
    团队任务个人博客20160424
    软件工程进度条-第八周
  • 原文地址:https://www.cnblogs.com/liuw-flexi/p/14323663.html
Copyright © 2020-2023  润新知