文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)

2023-08-17 13:35

关注

请添加图片描述

  • 💌 所属专栏:【微信小程序开发教程】

  • 😀 作  者:我是夜阑的狗🐶

  • 🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!

  • 💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘


  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第27篇文章;
  今天开始学习微信小程序的第15天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


  前面已经学习了页面事件–上拉触底,通过栗子学习了上拉触底的监听触发和配置上拉底距。接下来就来通过案例详细了解上拉触底事件。话不多说,让我们原文再续,书接上回吧。

请添加图片描述

1、案例效果

  可以先来看一下要实现的效果图,图中有随机背景颜色的box,如下所示:

在这里插入图片描述

  想要实现上面的那个效果,实现步骤可分为 6 个步骤:

  首先来定义获取随机颜色的方法,具体代码如下:

contact.js

  这里 colorList 数组要保留新旧数据一起,所以赋值的时候要采用拼接方式进行。

Page({    data: {    colorList: []  },      getColors() {    wx.request({      url: 'https://www.escook.cn/api/color',      method: 'GET',      success: ({data: res}) =>{        console.dir(res);        this.setData({          colorList: [...this.data.colorList, ...res.data]        })      }    })  },    onLoad(options) {    this.getColors();  },})

  可以来看一下控制台有没有打印出数据:

在这里插入图片描述

  在定义完随机获取颜色的方法之后,就要在页面加载的时候来获取了,具体代码如下:

contact.js

  这里 colorList 数组要保留新旧数据一起,所以赋值的时候要采用拼接方式进行。

Page({    onLoad(options) {    this.getColors();  },})

  点击 AppData 也能看到 colorList 数组也被赋值了。

在这里插入图片描述

  能获取数据之后,接下里就是将数据展示在页面上并对页面样式进行美化,因为要将 colorList 数组渲染在页面上,所以要用 wx:for 来进行实现,具体代码如下:

contact.wxml

  注意这里不要忘记给 wx:key 赋值 ,其中还通过style动态绑定背景颜色。

{{item}}

contact.wxss

  对样式进行美化。

.num-item{    border:  1rpx solid #efefef;    border-radius: 8rpx;  line-height: 200rpx;  margin: 20rpx;  text-align: center;    text-shadow: 0rpx 0rpx 5rpx #fff;  box-shadow: 1rpx 1rpx 6rpx #aaa;}

  可以来看一下实际效果:

在这里插入图片描述

  这个就比较简单了,只要在上拉监听函数再次调用 getColors() 方法即可

contact.js

Page({    onReachBottom() {    this.getColors();  },})

  可以来看一下运行效果:

在这里插入图片描述

  这里可以发现首次进来页面的时候,colorList 数组只有10个数据,当进行上拉触发监听的时候,colorList 数组发生了改变。

在这里插入图片描述

  这里可以先查看 官方文档 了解一下显示 loading 提示框的函数 wx.showLoading(Object object),这里简单学习该函数的参数:

属性类型默认值必填说明
titlestring提示的内容
maskbooleanfalse是否显示透明蒙层,防止触摸穿透
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

注意:

  • 需主动调用 wx.hideLoading 才能关闭提示框;
  • wx.showLoadingwx.showToast 同时只能显示一个;
  • wx.showLoading 应与 wx.hideLoading 配对使用;

  接下来就为页面添加 loading 提示,具体代码如下:

contact.js

Page({    getColors() {    // 展示 loading 效果    wx.showLoading({      title: '数据加载中...',    })    wx.request({      url: 'https://www.escook.cn/api/color',      method: 'GET',      success: ({data: res}) =>{        console.dir(res);        this.setData({          colorList: [...this.data.colorList, ...res.data]        })      },      complete: () =>{        // 隐藏 Loading 效果        wx.hideLoading();      }    })  },})

  当数据加载完成之后就触发 complete 回调关掉 Loading 提示框。

在这里插入图片描述

  当连续触底多次,就会引发不必要的问题。所以需要在上拉监听函数做节流处理,如果当前请求正在请求数据,后续发送的请求都应该进行屏蔽。当前没有数据请求的时候,才可以允许发起下一页的请求。

  节流处理可分为以下步骤:

  isloading 为布尔值,false 表示当前没有进行任何数据请求,可以请求, true 表示当前正在进行数据请求,重新触发的下一页请求都要被屏蔽。

  当开始发起请求时,调用 getColors 时将节流阀设置 true,数据请求完成之后,在网络请求的 complete回调函数中,将节流阀重置为 false

  如果节流阀的值为 true,则阻止当前请求。如果节流阀的值为 false,则发起数据请求。

  具体代码如下:

contact.js

Page({    data: {    colorList: [],    isLoading: false  },      getColors() {    this.setData({      isLoading: true    })    // 展示 loading 效果    wx.showLoading({      title: '数据加载中...',    })    wx.request({      url: 'https://www.escook.cn/api/color',      method: 'GET',      success: ({data: res}) =>{        console.dir(res);        // 将新老数据拼接在一起        this.setData({          colorList: [...this.data.colorList, ...res.data]        })      },      complete: () =>{        // 隐藏 Loading 效果        wx.hideLoading();        // 请求完成,将isLoading置为false        this.setData({          isLoading: false        })      }    })  },     onReachBottom() {  // 对后续的数据请求进行节流    if(this.data.isLoading) return;    this.getColors();  },})

  可以来看一下运行效果:

在这里插入图片描述

  从图中可以看到,当数据正在加载的时候,节流阀 isLoading 被置为 true,当后续上拉触发数据请求时,由于前面的请求没有完成,就会自动屏蔽掉。


  感谢观看,这里就是上拉触底 - 案例的学习,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

在这里插入图片描述

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:



订阅更多,你们将会看到更多的优质内容!!

来源地址:https://blog.csdn.net/csh1807266489/article/details/129375672

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯