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

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


<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>


相关文章
|
3月前
|
监控 安全 Android开发
【新手必读】Airtest测试Android手机常见的设置问题
【新手必读】Airtest测试Android手机常见的设置问题
|
8月前
|
IDE 开发工具 Android开发
如何在没有 USB 数据线的情况下使用 Android Studio 在手机中安装 Android
如何在没有 USB 数据线的情况下使用 Android Studio 在手机中安装 Android
114 1
|
5月前
|
XML Java Android开发
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
Android Studio开发之使用内容组件Content获取通讯信息讲解及实战(附源码 包括添加手机联系人和发短信)
99 0
|
4月前
|
安全 网络协议 Linux
【公网远程手机Android服务器】安卓Termux搭建Web服务器
【公网远程手机Android服务器】安卓Termux搭建Web服务器
70 0
|
5月前
|
传感器 物联网 Android开发
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
【Android App】物联网中查看手机支持的传感器及实现摇一摇功能-加速度传感器(附源码和演示 超详细)
71 1
|
5月前
|
Android开发 网络架构
【Android App】检查手机连接WiFi信息以及扫描周围WiFi的讲解及实战(附源码和演示 超详细必看)
【Android App】检查手机连接WiFi信息以及扫描周围WiFi的讲解及实战(附源码和演示 超详细必看)
226 1
|
5月前
|
XML Java 定位技术
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
【Android App】定位导航GPS中开启手机定位功能讲解及实战(附源码和演示 超详细)
120 0

热门文章

最新文章