vue 实现滚动到底部翻页效果(pc端)


Posted in Javascript onJuly 31, 2019

pc端vue 滚动到底部翻页 效果,具体内容如下所示:

html:

<div class="list" ref="scrollTopList">
                <div class="listsmall" v-for="(item,index) of list" :key="index" @click="getDeviceInfo(item.id)">
                  <span class="state" :class="{'state1':item.status==1,'state0':item.status==0,'state2':item.status==2,'state3':item.status==3}"></span>
                  <span class="text textcolor">【{{item.code||item.name}}】</span>
                  <span class="text">{{item.name}}</span>
                </div>
              </div>

js:

先写滚动事件

handleScroll(){
        let scrollTop = this.$refs.scrollTopList.scrollTop, 
        clientHeight = this.$refs.scrollTopList.clientHeight, 
        scrollHeight = this.$refs.scrollTopList.scrollHeight,
        height = 50; //根据项目实际定义
        if(scrollTop +clientHeight >= scrollHeight - height){
          if(this.pageSize > this.total){
            return false
          }else{
            this.pageSize = this.pageSize +10 //显示条数新增
            this.getpageList() //请求列表list 接口方法
          } 
        }else{
          return false
        }
      },

method中写节流函数

throttle(func, wait) {
        let lastTime = null
        let timeout
        return () => {
          let context = this;
          let now = new Date();
          let arg = arguments;
          if (now - lastTime - wait > 0) {
            if (timeout) {
              clearTimeout(timeout)
              timeout = null
            }
            func.apply(context, arg)
            lastTime = now
          } else if (!timeout) {
            timeout = setTimeout(() => {
              func.apply(context, arg)
            }, wait)
          }
        }
      },

mounted中调用

mounted(){
this.$refs.scrollTopList.addEventListener("scroll",this.throttle(this.handleScroll,500),true)
},

//-------------------------------------------------------------------------------------------第二种写法

html:

添加滚动事件

<div class="tablelist-box" @scroll="scrollEvent($event)">
        <div
         class="tablelist"
         :class="{'active':listDevicesDetailIndex==index}"
         v-for="(item,index) of deviceList"
         :key="index"
         v-if="deviceList.length !== 0"
         @click="deviceDetail(item,index)"
        >
         <span class="tablelist-status">
          <i
           :class="{zx:item.status==1,lx:item.status==2, wjh:item.status==0,gj:item.status==3}"
          ></i>
         </span>
         <span class="tablelist-bg">{{item.code != null ?item.code:"/"}}</span>
        </div>
        <div class="list-more" v-show="!deviceListIsFinish">{{deviceTip}}</div>
        <div class="list-more" v-show="deviceListIsFinish">{{deviceTip}}</div>
       </div>

 css:

tablelist-box{
 height: //根据实际项目取
 overflow:auto //必须 不然判断有问题
}

css 定义

js

写入滚动事件

scrollEvent(e) {
   if (e instanceof Event) {
    let el = e.target;
    let scrollTop = el.scrollTop;
    // 获取可视区的高度
    let clientHeight = el.clientHeight;
    // 获取滚动条的总高度
    let scrollHeight = el.scrollHeight;
    let height = 50;
    //到底了
    // console.log(this.deviceListIsLoad, this.deviceListIsFinish);
    // console.log(scrollTop, clientHeight, scrollHeight);
    //是否继续加载且已完成加载
    if (
     scrollTop + clientHeight >= scrollHeight &&
     this.deviceListIsLoad &&
     !this.deviceListIsFinish
    ) {
     // 把距离顶部的距离加上可视区域的高度 等于或者大于滚动条的总高度就是到达底部
     this.deviceListIsLoad = true;
     console.log("到底了");
     setTimeout(() => {
      this._deviceListPage();
     }, 1000);
    }
   }

请求列表的处理

_deviceListPage() {
   let params = {
    pageSize: this.devicePageSize,
    pageNum: this.devicePageNum,
    kw: "", //查询条件(通配查询条件)
    type: this.deviceType, //设备类型(下拉)2.1.6接口获取
    code: this.deviceCode, //设备编号
    areaId: this.deviceareaId, //位置区域
    status: this.deviceStatus, //状态 1:在线(正常),0:未激活,2已离线,3.告警
    imei: "" //imei编号
   };
   deviceListPage(params).then(res => {
    if (res.code == 200) {
     this.devicePageTotal = res.body.total;
     this.devicePageSize = res.body.pageSize;
     this.devicePageNum = res.body.pageNum;
     this.devicePageTotalPages = parseInt(
      (this.devicePageTotal + this.devicePageSize - 1) /
       this.devicePageSize
     );
     if (this.devicePageTotal == 0) {
      // console.log("没有数据");
      //没有数据
      this.deviceListnodata = true;
      this.deviceListIsLoad = false;
      this.deviceListIsFinish = true;
      this.devicePageNum = 1;
      this.deviceTip = "暂无数据";
      return false;
     }
     this.deviceList = this.deviceList.concat(res.body.datas);
     // console.log(this.devicePageNum, this.devicePageTotalPages);
     if (this.devicePageNum == this.devicePageTotalPages) {
      //没有更多
      this.deviceListIsLoad = false;
      this.deviceListIsFinish = true;
      this.devicePageNum = 1;
      this.deviceTip = "没有更多了~";
      // console.log("没有更多了");
     } else {
      // console.log("下一页");
      //下一页
      this.deviceListIsLoad = true;
      this.deviceListIsFinish = false;
      this.devicePageNum++;
      this.deviceTip = "正在加载中~";
     }
     // console.log("deviceList", this.deviceList);
    } else {
     // this.deviceList = [];
     this.deviceListIsLoad = false;
     this.deviceListIsFinish = true;
     this.devicePageNum = 1;
     this.deviceTip = "数据加载失败~";
    }
   });
  },

return中的定义

devicePageSize: 10, //每页显示
   devicePageNum: 1, //当前页
   devicePageTotal: 0, //总条数
   devicePageTotalPages: 0, //总页数
   deviceListIsFinish: false, //是否加载完成
   deviceListIsLoad: false, //是否加载更多
   deviceListnodata: false, //是否有数据
   deviceTip: "",

总结

以上所述是小编给大家介绍的vue 实现滚动到底部翻页效果(pc端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery api参考 visualjquery 中国线路 速度快
Nov 30 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
May 03 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
arctext.js实现文字平滑弯曲弧形效果的插件
May 13 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
js实现一个简易计算器
Mar 30 #Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
JS获取动态添加元素的方法详解
Jul 31 #Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 #jQuery
详解Vuex下Store的模块化拆分实践
Jul 31 #Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 #Javascript
Vuex 模块化使用详解
Jul 31 #Javascript
You might like
php实现支持中文的文件下载功能示例
2017/08/30 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
再谈javascript 动态添加样式规则 W3C校检
2009/12/25 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
jQuery中wrapAll()方法用法实例
2015/01/16 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue写h5页面的方法总结
2019/02/12 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
Python中如何使用if语句处理列表实例代码
2019/02/24 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python如何向SQLServer存储二进制图片
2020/06/08 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
法律专业学生的自我评价
2014/02/07 职场文书
高二物理教学反思
2014/02/08 职场文书
群众路线党课主持词
2014/04/01 职场文书
小学毕业演讲稿
2014/04/25 职场文书
招股说明书范本
2014/05/06 职场文书
五心教育心得体会
2014/09/04 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
python文本处理的方案(结巴分词并去除符号)
2021/05/26 Python