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 相关文章推荐
javascript 树控件 比较好用
Jun 11 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
Dec 21 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
js动态为代码着色显示行号
May 29 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
jquery自定义表单验证插件
Oct 12 Javascript
jquery validation验证表单插件
Jan 07 Javascript
canvas红包照片实例分享
Feb 28 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
js实现点赞按钮功能的实例代码
Mar 06 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 autoload机制的详解
2013/06/09 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
js对象的构造和继承实现代码
2010/12/05 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JavaScript中的property和attribute介绍
2011/12/26 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
2015/09/14 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
2016/08/10 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
[03:14]2014DOTA2西雅图国际邀请赛 EG战队巡礼
2014/07/07 DOTA
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
wxPython实现分隔窗口
2019/11/19 Python
linux环境下安装python虚拟环境及注意事项
2020/01/07 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
C面试题
2015/10/08 面试题
四年级学生评语大全
2014/04/21 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
文艺节目主持词
2015/07/06 职场文书
导游词之无锡梅园
2019/11/28 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
React四级菜单的实现
2022/04/08 Javascript