【微信小程序】-- 页面事件 - 上拉触底 - 案例(二十七)
创始人
2024-05-29 22:05:56
0

请添加图片描述

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

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

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

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

文章目录

  • 前言
  • 一、上拉触底案例
      • 1、案例效果
  • 二、获取随机颜色
  • 三、在页面加载时获取初始数据
  • 四、渲染 UI 结构并美化页面效果
  • 五、上拉触底时获取随机颜色
  • 六、添加 loading 提示效果
  • 七、对上拉触底进行节流处理
  • 总结


前言

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


一、上拉触底案例

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

请添加图片描述

1、案例效果

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

在这里插入图片描述

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

  • Step 1、首先定义获取随机颜色的方法;
  • Step 2、通过 onLoad 函数在页面加载时获取初始数据;
  • Step 3、获取数据之后,将其渲染在 UI 结构并美化页面效果;
  • Step 4、在上拉触底时调用获取随机颜色的方法;
  • Step 5、给上拉触底添加 loading 提示效果;
  • Step 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 数组也被赋值了。

在这里插入图片描述

四、渲染 UI 结构并美化页面效果

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

contact.wxml

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

{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{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 提示效果

  这里可以先查看 官方文档 了解一下显示 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 提示框。

在这里插入图片描述

七、对上拉触底进行节流处理

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

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

  • Step 1、在 data 中定义 isloading 节流阀

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

  • Step 2、在 getColors() 方法中修改 isloading 节流阀的值

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

  • Step 3、在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制

  如果节流阀的值为 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置为falsethis.setData({isLoading: false})}})},/*** 页面上拉触底事件的处理函数*/onReachBottom() {// 对后续的数据请求进行节流if(this.data.isLoading) return;this.getColors();},
})

  可以来看一下运行效果:

在这里插入图片描述

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


总结

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

在这里插入图片描述

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

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

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



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

相关内容

热门资讯

自动打开应用安卓系统,安卓系统... 你有没有想过,手机里的那些应用,有时候真是让人又爱又恨呢?有时候,我们急需某个应用,却得费老大力气去...
安卓系统防沉迷软件,守护青少年... 你有没有发现,现在手机上玩游戏的诱惑力简直让人无法抗拒?尤其是安卓系统,那丰富的游戏资源,简直让人停...
流量最快的安卓系统,揭秘流量最... 你有没有想过,为什么你的手机总是那么卡,而别人的手机却像开了挂一样流畅?是不是好奇,为什么有些安卓系...
小米5换换安卓系统,畅享极致性... 你有没有想过,你的小米5手机,那个陪伴你走过无数日夜的小家伙,是不是也该给它来个“换新装”了呢?没错...
国产的安卓系统手机,畅享智能生... 你有没有发现,最近国产的安卓系统手机越来越火了?没错,就是那种咱们自己研发的系统,那种让外国品牌都不...
安卓系统刷入停止,探究原因与解... 你有没有遇到过这种情况?手机刷机过程中突然停止了,安卓系统刷入停滞不前,心里那个急啊!别慌,今天就来...
汽车是安卓系统嘛,安卓系统在智... 你有没有想过,汽车里那个神奇的操作系统,是不是和安卓手机里的一样呢?没错,今天咱们就来聊聊这个话题—...
网易狼人杀 安卓系统,体验指尖... 亲爱的玩家们,你是否曾在深夜里,手机屏幕前,与一群好友展开一场惊心动魄的“狼人杀”对决?今天,就让我...
小米安卓系统小主机,探索小米安... 你有没有想过,家里的电视、电脑、平板,甚至手机,其实都可以变成一个超级智能的娱乐中心?没错,这就是小...
卡刷安卓系统大全,全面解析各类... 你有没有想过,你的安卓手机可以像变形金刚一样,随心所欲地变换模样?没错,今天就要给你揭秘一个神奇的世...
安卓系统测试流畅度,安卓系统流... 你有没有发现,现在手机更新换代的速度简直就像坐上了火箭呢!尤其是安卓系统,每次更新都让人眼前一亮。但...
安卓系统50怎么升级,轻松迈向... 亲爱的安卓用户们,你是否也像我一样,对安卓系统的更新充满了期待?没错,就是那个让我们的手机焕然一新的...
安卓5.1.1操作系统,系统特... 你知道吗?在手机世界里,操作系统就像是个大管家,它不仅决定了手机的脸面,还掌管着手机的所有“家务事”...
手机安卓系统如果升级,体验流畅... 亲爱的手机控们,你们有没有发现,你的安卓手机最近是不是总在提醒你更新系统呢?别急,别急,今天就来给你...
安卓系统怎么禁止待机,安卓系统... 手机待机时间短,是不是让你头疼不已?别急,今天就来教你一招,让你的安卓手机告别“短命”模式,延长待机...
亿联安卓苹果系统,跨平台沟通新... 你知道吗?在科技飞速发展的今天,手机操作系统可是咱们日常生活中不可或缺的一部分。说起手机系统,亿联安...
smoothx安卓系统安装ap... 你有没有想过,为什么你的手机里总是乱糟糟的,各种app堆在一起,找起来费劲得很?别急,今天就来教你怎...
安卓系统图库在哪里,图库应用位... 你有没有发现,手机里的照片越来越多,有时候想找一张特定的照片,却像大海捞针一样困难?别急,今天就来告...
安卓7.0系统自带彩蛋,隐藏彩... 你知道吗?安卓7.0系统里竟然藏着不少小秘密,就像一颗颗隐藏的彩蛋,等着我们去发现。今天,就让我带你...
安卓系统好用的电池,好用到飞起... 你有没有发现,用安卓手机的时候,电池续航能力简直让人爱不释手啊!没错,今天咱们就来聊聊这个话题——安...