【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置

简介: 【实现手机端上滑滚动加载列表】判断页面是否滚动到底部或者指定元素位置


<script>
export default {
  data() {
    return {
      pageIndex: 0,//页码
      pageSize: 10,//每次加载条数
      lock: false,//防止频繁加载
    };
  },
  onLoad() {
    // 实现滚动加载----------------------------------------
    window.onscroll = () => {
      var st = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      var listHeight = document.querySelector('.content').offsetHeight;
      if (!this.lock && st > listHeight - window.innerHeight - 50) {
        this.pageIndex++, this.initList();
      }
    };
  },
  methods: {
    // 加载列表----------------------------------------
    initList() {
      this.lock = true; //锁定(防止重复频繁加载)
      console.log('追加列表完成', this.pageIndex);
      this.lock = false; //加载完成后解除锁定
    }
  }
};
</script>


相关文章
|
移动开发 小程序 Android开发
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
小程序webview组件嵌H5页面,安卓手机没有问题,苹果有部分页面不显示
244 0
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
uniapp小程序单页面改变手机电量,头部通知的颜色效果demo(整理)
|
4月前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
69 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
前端开发 小程序
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
【微信小程序-原生开发】实用教程20 - 生成海报(实战范例为生成活动海报,内含生成指定页面的小程序二维码,保存图片到手机,canvas 系列教程)
507 0
|
10月前
|
Web App开发 编解码
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
软件开发常见流程之兼容性和手机屏页面设计,PC端和移动端常见浏览器,国内的UC都是根据Webkit修改过来的内核,开发重点关注尺寸,常见移动端尺寸汇总,移动端,理想视口根据你设别的样式进行修改
|
10月前
|
前端开发 Windows
手机真机调试本地前端页面
手机真机调试本地前端页面
249 0
|
11月前
|
JavaScript
技术心得:根据不同访问设备跳转到PC页面或手机页面
技术心得:根据不同访问设备跳转到PC页面或手机页面
124 0
|
12月前
|
安全 iOS开发
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
93 0
|
12月前
|
UED
禁止手机侧滑返回上一个页面的三种方法
禁止手机侧滑返回上一个页面的三种方法
625 0
|
12月前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
103 0

热门文章

最新文章

  • 1
    如何通过DIY.JS快速构建出一个DIY手机壳、T恤的应用?
    32
  • 2
    阿里云无影云手机怎么用?非常简单,云手机创建、价格及连接使用图文教程
    148
  • 3
    什么是阿里云无影云手机?看完秒懂,云手机价格、创建及连接教程
    186
  • 4
    TaoAvatar:手机拍出电影级虚拟人!阿里3D高斯黑科技让动捕设备下岗
    205
  • 5
    SpatialLM:手机视频秒建3D场景!开源空间认知模型颠覆机器人训练
    142
  • 6
    算法系统协同优化,vivo与港中文推出BlueLM-V-3B,手机秒变多模态AI专家
    85
  • 7
    【02】整体试验思路,在这之前我们发现sec_uid,sec_uid是什么和uid的关系又是什么?相互如何转换?python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    156
  • 8
    【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
    101
  • 9
    【01】整体试验思路,如何在有UID的情况下获得用户手机号信息,python开发之理论研究试验,如何通过抖音视频下方的用户的UID获得抖音用户的手机号-本系列文章仅供学习研究-禁止用于任何商业用途-仅供学习交流-优雅草卓伊凡
    378
  • 10
    美团面试:手机扫描PC二维码登录,底层原理和完整流程是什么?
    223