微信小程序上拉触底案例添加loading效果

在上拉触底的时候如何添加小程序的loading效果呢？？就是左边现实的效果。有一个转动的圈圈

首先我们打开.js文件

在原有的请求颜色的基础上添加wx.showLoading

getColors(){wx.showLoading({title: '数据加载中....',})wx.request({       //这个是上一节的内容url: 'https://www.escook.cn/api/color',method:'GET',success:({ data:res}) =>{this.setData({colorList:[...this.data.colorList,...res.data]})},                //到这里都是complete:()=>{wx.hideLoading()}})},

使用wx.showLoading（{}）函数，title就是圈圈下面的文字。

但是问题来了如果只是用showLoading函数的话会导致一个问题，就是一旦开启它便无法关闭。

所以我们需要添加wx.hideLoading()函数来关闭

 complete:()=>{wx.hideLoading()
}

这里之所以用到complete是当主题函数执行完之后，不管成功与否都执行wx.hideLoading()函数。

到这里当我们上拉触底时就会现实那个圈圈了，并且在执行完毕后就会关闭圈圈。非常的普通是吧哈哈。

但是问题又又又来了，我本来触底一次刷新一次，但是如果我在它加载的时候多次触底，它便会一直刷新，那我们怎么办呢？

 data: {colorList:[],isloading:false},

首先我们在data中创建一个isloading的变量，默认值为false

getColors(){this.setData({isloading:true})wx.showLoading({title: '数据加载中....',})wx.request({       //这个是上一节的内容url: 'https://www.escook.cn/api/color',method:'GET',success:({ data:res}) =>{this.setData({colorList:[...this.data.colorList,...res.data]})},                //到这里都是complete:()=>{wx.hideLoading()this.setData({isloading:false})}})},

接下来我们当我们执行getcolors函数的时候,我们用this.setdata函数来使得isloading值为true（这是一个判断条件）接下来是在complete中就是结束时不论成功与否，都用this.setdata函数使得isloading值为false。

说到这里大家可能云里雾里

onReachBottom() {if(this.data.isloading)returnthis.getColors()},

其实都是为了这里的判断语句，当我们上拉一次就会执行onrechbottom。当isloading为true的时候我们就返回（把后面的东西都不管了）直接return 使得onrechbottom无法完整执行。所以当isloading为false时候我们才执行上拉触底的刷新，这样就能防止有人手贱一直拉屏幕刷新了。

如果上面的解释内容有错误，希望大佬来指正一下，若有看不懂的地方欢迎来与我探讨！！

微信小程序上拉触底案例添加loading效果相关推荐

微信小程序上拉触底事件函数onReachBottom不触发的解决方案
造成不触发的原因可能有以下几种情况配置属性问题高度问题滚动条不在顶部需要回到顶部重新计算高度 onReachBottom函数被覆盖 1.配置属性问题在app.json或者本页的json文件中 ...
微信小程序上拉加载更多
微信小程序上拉加载更多无论是微信小程序还是其他前端框架,都会遇到上拉加载(懒加载)和下拉刷新这种问题.其实理清楚什么时候请求数据.请求返回的几种情况,那么做这个懒加载就很简单了. 一.首先,固定一个 ...
微信小程序上拉加载流程
微信小程序上拉加载流程 1.首先需要在微信官方文档把scroll-view这个方法引入进来,然后使用这个方法,在样式里面写scroll-y,代表的是上下滑动,然后给滑动的盒子一个高度,100vh,然后 ...
微信小程序上拉刷新下拉加载
// pages/order/order.js Page({/*** 页面的初始数据*/data: {goods:[],page:1},/*** 生命周期函数--监听页面加载*/ 与端口之间链接,调用 ...
微信小程序---上拉/下拉获取信息组件
1. 前端 1.1 app.json配置(默认不支持下拉) 局部配置,如果想全局都可以下拉,那配置在全局的app.json即可 {"enablePullDownRefresh": ...
微信小程序上拉加载配置，上拉加载设置不生效问题
一.上拉加载配置 1:json文件配置 "onReachBottomDistance": 50 {"usingComponents": {},"nav ...
微信小程序下拉触底卡顿
做小程序案例的时候,发现像下图这样写,下拉触底时不会立即弹出toast轻提示,需要往上滑一下,再往下滑才出现轻提示(感觉像卡顿一下似的),而后判断条件改成>=则解决下拉触底卡顿问题
微信小程序上拉加载更多
来个上拉刷新,解决一下上拉问题.上拉小伙伴除了用微信小程序自带的onReachBottom外,最多用的就是scroll-view的上拉加载啦.但是呢,scroll-view上拉加载会一到底部就不断的触 ...
微信小程序 | canvas为你的天气预报添加雨雪效果
在 Canvas 开发中,经常会提到粒子系统,使用粒子系统可以模拟出火.雾.云.雪等抽象视觉效果.它是HTML5新增的为页面添加多样化效果的绝佳实践. 正巧最近做的一个天气类微信小程序紧接尾声,寻思着 ...

微信小程序上拉触底案例添加loading效果

微信小程序上拉触底案例添加loading效果相关推荐

最新文章

热门文章