微信小程序 滚动到底部加载新的数据 之后滚动到顶部

news/2024/7/20 2:13:25 标签: 微信小程序, 小程序

1.配置到底部监听

在app.json的window里面加入

里面的300表示距离底部300rpx触发onReachBottom事件 默认50rpx

 "window": {
    "onReachBottomDistance": 300
  },

2.在数据列表的js页面

  /**
   * 页面上拉触底事件的处理函数
   */
   onReachBottom() {
    console.log("到底部了");
    // 把字符串转为数字进行加减
    let page = parseInt(this.data.page)
    // 当前数据到底部就把page+1传入获取第二页数据合并
    page = parseInt(page + 1)
    console.log(page);
    this.setData({
      page:page
    })
    this.getClue(page)
  },

// 请求数据方法
getClue(page) {
    getClueApi({
      page
    }).then((res) => {
        // 请求返回的数据
      console.log(res.data);
       // 把请求到的数据与前一次的数据合并,第一次的时候定义的列表要为空[]
       let list = []
        // 判断当前是否为第一页,在还有其他筛选条件的情况下,其他筛选条件更新时,传入的this.data.page为1 就会覆盖整个list数据
      if (page != 1) {
        list = [...this.data.list, ...res.data.list.data]
      } else {
       // 传入1就初始化为1
        this.setData({
          page:page
        })
        // 滚动到顶部
        wx.pageScrollTo({
          scrollTop: 0
      })
        list = res.data.list.data
      }
      this.setData({
        list: list,
        cluestatus: res.data.status,
      })
    })
  },
// 其他筛选触发的事件
 input() {
    if (this.data.seek != "") {
        // 这里传入的page为1 所以会重新覆盖list数据
      this.getClue(1, this.data.seek)
    } else {
      Toast({
        position: "top",
        message: '请输入搜索词!'
      });
    }
  },

 


http://www.niftyadmin.cn/n/878028.html

相关文章

Angular2 -- 生命周期钩子

组件生命周期钩子 指令和组件的实例有一个生命周期:新建、更新和销毁。如果我们能够熟悉每个生命周期的过程可能会帮我我们很简单的实现一些比较麻烦的功能 每个接口都有唯一的一个钩子方法,它们的名字是由接口名加上 ng前缀构成的。比如,On…

[Azure]Azure虚拟机扩展的介绍和使用

VM Agent简介 VM Agent是部署在虚拟机内的一个进程,用于协助管理,配置和加速虚拟机。在使用官方映像创建虚拟机的最后一个步骤中有配置VM Agent的选项。 对于Windows虚拟机而言,常见的一些VM Agent的应用例如在背景中…

平板电脑可以插u盘吗_开箱测评,U盘大小的电脑主机你见过吗?口袋里的电脑主机测评...

电脑已经发明了几十年,如今我们大部分常见的就是台式机电脑和笔记本电脑以及平板电脑。特别是台式机电脑,虽然已经有一些小机箱的款式,但是还是略显庞大。有没有一种像U盘一样的主机,可以随时携带呢?我们本期就要开箱这…

ngx-bootstrap modal模态框

导入Module ... import { ModalModule} from ngx-bootstrap; ... ... NgModule({declarations: [AddXXComponent],imports: [...ModalModule.forRoot()...] }) export class AddXXModule { }在组件Components.ts中使用 import { Component, OnInit, TemplateRef } from ang…

Linux中查看常用命令的源码

我们以CentOS 6.8上面查看ls命令的源代码为例: 首先我们通过下面的命令查看命令的位置: [rootDanCentOS65 daniel]# which ls alias lsls --colorauto /bin/ls 接着我们查看包的名称: [rootDanCentOS65 daniel]# r…

运筹 quadratic program_超星2020年运筹学题目及答案

超星2020年运筹学题目及答案更多相关问题读风化作用强弱与气候相关表示意图,回答下列问题关于岩石风化作用的叙述,正确的是()A.从①到②物理风化作用在新疆罗布泊西北楼兰的一些干涸的湖底考察往往见到外观如同古城堡的砂岩地貌景观&#xff…

弹框input标签自动获取焦点

html中&#xff0c;只会在页面加载后&#xff0c;点击按钮打开弹窗第一次&#xff0c;会自动获取焦点&#xff0c;之后就打开弹窗就不会再有弹窗事件&#xff0c;所以这样只能直接在页面中的输入框中使用&#xff0c;不适合用在弹窗中 <input type"text" id&quo…

anaconda切换环境_搭建 Python 高效开发环境: Pycharm + Anaconda

介绍先来介绍下两位主角&#xff1a;Pycharm&#xff1a;目前一款主流的 Python 集成开发环境&#xff0c;它带有一整套帮助我们在Python开发时提高效率的工具&#xff0c;比如调试、语法高亮、Project管理、代码跳转、智能提示、自动完成、单元测试、版本控制。总的来说&#…