脚本之家

电脑版
提示:原网页已由神马搜索转码, 内容由www.jb51.net提供.
您的位置：首页→ 网络编程→ JavaScript→ javascript技巧→ 小程序上拉加载和下拉刷新

微信小程序上拉加载和下拉刷新功能实现

  更新时间：2024年06月27日 12:05:54  作者：井眼 
这篇文章主要介绍了微信小程序上拉加载和下拉刷新功能实现,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

微信小程序上拉加载和下拉刷新

一.上拉加载

微信小程序的上拉加载使用onReachBottom()，写在.js文件里面的Page方法里面。

onReachBottom(){
    //上拉自动更新到4，5，6
    wx.showLoading({
      title: '数据加载中...',
    })
    setTimeout(()=>{
      const lastNum=this.data.numList[this.data.numList.length-1]
      const newAry=[lastNum+1,lastNum+2,lastNum+3]
      this.setData({
        numList:[...this.data.numList,...newAry]
      })
      wx.hideLoading()
    },1500)
  }

onReachBottom()会监听微信小程序上拉操作。
需要在.json文件里面配置"onReachBottomDistance"属性。
如下面的代码，在距离底部50px的时候会触发到onReachBottom()

"onReachBottomDistance": 50px

二.下拉刷新

下拉刷新使用onPullDownRefresh()

  onPullDownRefresh(){
    //下拉刷新后，显示1，2，3
    this.setData({
      numList:[1,2,3]
    })
    if(this.data.numList.length === 3){
      wx.stopPullDownRefresh()
    }
  }

注意，在使用onPullDownRefresh() 的时候，需要及时使用wx.stopPullDownRefresh()进行关闭，不然可能会长时间显示刷新状态

在这里插入图片描述

微信小程序开发---上拉触底

一、上拉触底的概念

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多的数据，也就是往下滑动。

二、监听页面的上拉触底事件

在页面.js文件宗，通过onReachBottom（）函数即可监听当前页面的上拉触底事件

onReachBottom(){
   console.log("上拉")
 }

三、配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或者页面的.json文件中，通过onReachBottomDistance属性配置上拉触底的距离

小程序默认的距离是50px

"onReachBottomDistance": 100

到此这篇关于微信小程序上拉加载和下拉刷新的文章就介绍到这了,更多相关小程序上拉加载和下拉刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

相关文章

    • 用js调用迅雷下载代码的二种方法
      用js调用迅雷下载代码的二种方法，需要的朋友可以参考一下
      2013-04-04
    • Bootstrap 响应式实用工具实例详解
      Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。下面通过本文给大家分享Bootstrap 响应式实用工具，一起看看吧
      2017-03-03
    • JS控制下拉列表左右选择实例代码
      在本篇内容中小编给各位分享的是关于如何使用JS控制下拉列表左右选择的实例代码，需要的朋友们可以参考下。
      2020-05-05
    • 纯javascript实现选择框的全选与反选功能
      这篇文章主要介绍了纯javascript实现选择框的全选与反选 ,需要的朋友可以参考下
      2019-04-04
    • Kindeditor在线文本编辑器如何过滤HTML
      KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。本文给大家介绍Kindeditor在线文本编辑器如何过滤HTML，需要的朋友参考下吧
      2016-04-04
    • 微信小程序转盘抽奖的实现方法
      这篇文章主要为大家详细介绍了微信小程序转盘抽奖的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
      2022-07-07
    • js实现特定位取反原理及示例
      循环输入每组两个数hex和n(0<=n<31)，hex是一个16进制的数字，我们要做的是将hex的第n位取反，然后以16进制的形式输出对应的结果
      2014-06-06
    • JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
      这篇文章主要介绍了JS使用replace()方法和正则表达式进行字符串的搜索与替换实例,需要的朋友可以参考下
      2014-04-04
    • JavaScript状态模式及适配器模式使用讲解
      这篇文章主要介绍了理解JavaScript中的状态模式及适配器模式,适配器模式即Adapter Pattern，是作为两个不兼容的接口之间的桥梁。这种类型的设计模式属于结构型模式，下文更多相关介绍需要的小伙伴可以参考一下
      2022-12-12
    • JS图片懒加载的优点及实现原理
      这篇文章主要介绍了JS图片懒加载的优点及实现原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
      2020-01-01

    最新评论