关于vue下拉获取到下一页的数据

关于vue下拉获取到下一页的数据如此代码:methods里面getSpecialData(){//constparams={//page:this.pagenum//};//console.log(params);orderslist(this.pagenum).then(res=>{if(this.pagenum==1){

如此代码:

methods里面       
getSpecialData() {
          // const params = {
          //   page: this.pagenum
          // };
          // console.log(params);
          orderslist(this.pagenum).then(res => {
            if (this.pagenum == 1) {
              // this.datacounts = res.count;
              // this.newsTop = res.data.topnew;
            } else {
              let aaa = res.data.records
              // aaa.forEach(item =>{
              //   item.pic=item.pic.split(',')
              // })
              this.shopbox = this.shopbox.concat(aaa)
              console.log(this.shopbox);
              this.scroll = true;
            }
            this.pagenum = this.pagenum+1;
            console.log(this.pagenum);
          });
        },
        handleScroll () { //滚动事件监听处理
        //是否滚动到底部的判断
        let scrolltop =
          document.documentElement.scrollTop ||
          document.body.scrollTop ||
          window.pageYOffset;
        if (
              (scrolltop + document.documentElement.clientHeight ==
                document.documentElement.scrollHeight) &
              this.scroll
            ) {
              if (this.pagenum > this.totalnum) {
                //如果大于总页数停止请求数据
                // this.nomore = 1;
                this.nomore =true
                this.$toast("已全部加载完成")
              } else {
                this.getSpecialData();
                this.nomore =false
              }
            }
        }
        //销毁函数里面
      destroyed() {
        window.removeEventListener("scroll", this.handleScroll, false);
      }

       //最后在此调用
    created() {
        window.addEventListener("scroll", this.handleScroll);
    },

                    //添加文字描述
                <p class="morelp">
                  {
  
  { nomore ? "没有更多了" : "正在加载..." }}
                </p>


   即可实现下拉刷新下页的内容       

如此即可

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36322.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注