微信小程序(九)小程序实现下拉刷新

简介: 微信小程序(九)小程序实现下拉刷新

下拉刷新这个玩意吧,很有用,但是在我博客关联的小程序中,用处不大,也是,我那个小程序一共也没有几个页……

我这里还是用在首页,上拉分页,下拉刷新重载分页。我就是这么做的。

下拉刷新和上拉分页还是有区别的。

下拉刷新需要在index.json中添加属性:

"enablePullDownRefresh": true

Index.js

Page({
  data: {
    // 文章数组
    articleList:[],
    //每页显示的行数:
    pagesize: 20,
    //页码(从1开始)
    page:1,// 文章页码
    //用于标识是否还有更多的状态
    state: 1,
    //用于数组的追加和暂存
    allProject: [],
  },
/**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    var self = this;
    self.getArticleList();
  },
    /**
   * 获取文章列表
   */
  getArticleList()
  {
    var self = this;
    // 请求后台接口获取文章列表
    wx.request({
      // 请求连接
      url: 'https://guanchao.site/index/xxxx/xxxxx,
      // 请求所需要的的参数
      data: {
        'page':self.data.page
      },
      success(result){
        var resData = result.data;
        var resLength = result.data.length;
        //如果搜出来的结果<1 就说明后面已经没数据可加载了,所以将state设为0
        if (resLength < 1)
        {
          self.setData({
            state: 0
          });
        }
        else
        {
          var state1 = 1;
          //如果有数据,但小于每次期望加载的数据量(pagesize),将state设为0,表示后面已没有数据可加载
          if (resLength < self.pagesize)
          {
            var state1 = 0;
          }
          //循环将结果集追加到数组后面
          for (var i = 0; i < resLength; i++) {
            self.data.allProject.push(resData[i]);
          }
          self.setData({
            articleList: self.data.allProject,
            state: state1
          });
        }
        wx.hideLoading();
  
      }
    });
  },
  /**
   * 下拉刷新
   */
  onPullDownRefresh() {
    // 下拉刷新
    var self = this;
    wx.showLoading({
      title: '加载中...',
});
// 页码重新设置回1
self.data.page = 1;
// 将显示列表数据清空
    self.data.allProject = [];
    self.getArticleList();
    wx.stopPullDownRefresh();
  }, 
  
});

可以看到,我们增加了一个onPullDownRefresh函数并在里面调用了getArticleList去请求第一页的数据,并且页面显示数据的数组清空, 页码设置成1,重新加载数据。

另外,下拉刷新的事件也可以通过调用APIwx.startPullDownRefresh触发,效果与用户手动下拉刷新一致。

微信小程序其实我觉得就是一个基于微信的APP。嗯,个人看法。

有好的建议,请在下方输入你的评论。

欢迎访问个人博客:https://guanchao.site

欢迎访问我的小程序:打开微信->发现->小程序->搜索“时间里的”

目录
相关文章
|
10月前
|
机器学习/深度学习 数据采集 人工智能
《大模型训练成本高,如何在不牺牲性能的前提下破局》
在人工智能领域,大模型训练成本高昂,主要源于硬件设备、数据处理和算法优化的需求。降低训练成本的关键在于合理配置硬件资源、改进数据处理方法、优化算法和模型结构,以及采用分布式训练技术。通过这些措施,企业可以在不影响模型性能的前提下,显著减少计算资源、人力和时间的投入,实现更高效的模型训练。实践证明,综合运用这些方法能够有效降低成本,推动人工智能技术的可持续发展。
551 18
|
9月前
|
数据挖掘 BI 数据安全/隐私保护
三大CRM品牌深度评测:销售易、悟空、超兔
**销售易CRM**:专为中国市场设计,提供强大的本土化服务和定制化解决方案,涵盖客户管理、销售自动化、市场营销、服务支持及数据分析等功能。 **悟空CRM**:以“智慧、灵活、高效”为核心,用户界面友好,支持销售、营销和服务的全面自动化,并具备高级数据分析和协作工具。 **超兔CRM**:专注于数据分析和集成性,提供360度客户视图、销售自动化、市场营销、客户服务及安全性保障,适用于各种规模的企业。 通过对比三者的功能和优势,企业可以更明智地选择适合自己的CRM系统,从而更好地管理客户关系,提升业务绩效。
|
10月前
|
监控 安全 Linux
启用Linux防火墙日志记录和分析功能
为iptables启用日志记录对于监控进出流量至关重要
291 1
|
12月前
|
存储 C语言
C语言中a 和&a 有什么区别
在C语言中,&quot;a&quot; 是一个变量的名字,代表存储在内存中的某个值。而&quot;&a&quot; 则是获取该变量的内存地址,即变量a在计算机内存中的具体位置。这两者的主要区别在于:&quot;a&quot; 操作的是变量中的值,&quot;&a&quot; 操作的是变量的内存地址。
1517 23
|
11月前
|
数据可视化 算法 计算机视觉
什么是傅里叶变换?傅里叶变换处理图像的原理是什么?
傅里叶变换是一种强大的数学工具,能够将信号在时域与频域之间进行转换,广泛应用于物理学、信号处理、图像处理等领域。它能够将复杂信号分解为多个简单的正弦波,从而便于分析和处理。在图像处理中,傅里叶变换可以用于去噪、锐化和压缩等操作,通过滤波器选择性地保留或去除特定频率的信息,提高图像质量。
|
自然语言处理 物联网 算法框架/工具
开源大语言模型(LLM)汇总
随着ChatGPT的火爆,越来越多人希望在本地运行一个大语言模型。为此我维护了这个开源大语言模型汇总,跟踪每天不发的大语言模型和精调语言模型。
3365 0
开源大语言模型(LLM)汇总
|
网络安全 开发工具 git
GitHub
一、建立个人仓库 二、配置SSH密钥 三、克隆仓库代码 四、推送代码到个人仓库 五、代码拉取
784 1
|
存储 弹性计算 Dragonfly
阿里云服务器收费标准及新购1年、2年、3年、4年、5年优惠价格整理与分享
2023年5月7日,阿里云产品大规模调价的正式生效,调价之后c8y/g8y/r8y系列云服务器和g7/c7/r7系列云服务器价格下降了15-20%,gn6i/gn6v系列gpu云服务器更是下降了41-47%。目前轻量应用服务器及u1和g7/c7/r7系列云服务器可优惠选购1年,c8y/g8y/r8y系列云服务器可优惠选购1年到5年,本文为大家整理与分享阿里云服务器收费标准及新购1年、2年、3年、4年、5年优惠价格。
1948 0
阿里云服务器收费标准及新购1年、2年、3年、4年、5年优惠价格整理与分享
|
人工智能 搜索推荐 自动驾驶
使用 AI 工具是否会导致思考能力退化?如何应对?
文本探讨两个问题:使用 AI 工具是否会导致人类的思考能力退化?如何在使用AI工具的同时,保持甚至提高我们的思考能力?
732 0
使用 AI 工具是否会导致思考能力退化?如何应对?
|
云安全 弹性计算 安全
阿里云ACP认证练习题(三)
首先为大家介绍一下ACP专业认证。阿里云认证类似于大家比较熟悉的AWS认证、思科认证、红帽认证等厂商认证。阿里云认证分为三级ACA、ACP、ACE。 本文章主要针对ACP认证。ACP认证目前又按专业方向分四种:云计算(主要对应阿里云基础架构产品)、大数据(主要对应阿里云大数据系列产品)、云安全(主要对应阿里云云盾系列产品)、企业级互联网架构(主要对应阿里云企业级中间件系列产品)。
560 0
阿里云ACP认证练习题(三)