【微信小程序开发】小程序中的上滑加载更多,下拉刷新是如何实现的?

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯,先赞后看哦~🎈🎈

🏆 作者简介:景天科技苑
🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。
🏆《博客》:Python全栈,前后端开发,小程序开发,人工智能,js逆向,App逆向,网络系统安全,数据分析,Django,fastapi,flask等框架,linux,shell脚本等实操经验,网站搭建,数据库等分享。

所属的专栏:微信小程序开发零基础教学,难点与应用实战总结
景天的主页:景天科技苑

文章目录

  • 1.上滑加载更多
  • 2.下拉刷新
  • 3.scroll-view实现上拉加载更多,下拉刷新

1.上滑加载更多

结合上一章我们的项目,先在原来的基础上添加个goods页面
在这里插入图片描述

js代码

Page({data: {good_list: [1, 2, 3]},// 当滑动到底部还有100rpx时,就会触发这个函数执行---》发送请求获取数据onReachBottom() {console.log('上拉了')// 发送请求获取数据wx.request({url: 'http://127.0.0.1:8000/app01/random/',method:'GET',success:(res)=>{this.setData({good_list:this.data.good_list.concat(res.data)})}})},
})

###wxml####

<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

在这里插入图片描述

这样的123不好看没我们设置个样式
###wxss###

view{height: 400rpx;display: flex;justify-content: center;align-items: center;}/* 奇数背景色是粉色 */
view:nth-child(odd){background-color: pink;
}/* 偶数背景色绿色 */
view:nth-child(even){background-color: rgb(17, 133, 88);
}

在这里插入图片描述

现在我们要实现,往上拉,拉到最底部时,显示更多的数字
此时需要在goods.json文件中配置onReachBottomDistance

###json###

{"usingComponents": {},"onReachBottomDistance": 100
}

onReachBottomDistance的意思是,当拉到距离底部距离多少rpx时开始触发加载更多
在这里插入图片描述

滑动加载数据,在js代码中是固定的函数名 onReachBottom

      // 当滑动到底部还有100rpx时,就会触发这个函数执行---》发送请求获取数据onReachBottom() {console.log('下拉了')// 发送请求获取数据wx.request({url: 'http://127.0.0.1:8000/random',method:'GET',success:(res)=>{this.setData({good_list:this.data.good_list.concat(res.data)})}})},

django后端代码:
###url###
在这里插入图片描述

###视图###

import randomdef random_view(request):l = []for i in range(3):l.append(random.randint(0, 99999))return JsonResponse(l,safe=False)  # 返回json格式,如果里面有列表,必须加safe=False

后端运行
在这里插入图片描述

小程序上拉,显示更多数据
在这里插入图片描述

在这里插入图片描述

2.下拉刷新

上面我们讲到了下拉加载更多数据,如果我们想恢复到最初的默认怎么办,此时就用到了下拉刷新

###json中配置###

{"usingComponents": {},"onReachBottomDistance": 100,"enablePullDownRefresh": true,"backgroundColor": "#efefef","backgroundTextStyle":"dark"
}

在这里插入图片描述

###wxml ###

<view wx:for="{{good_list}}" wx:key="*this">{{item}}</view>

###js ###

// 下拉刷新-
onPullDownRefresh(){console.log('下拉了,刷新')// 只要下来,把数据恢复this.setData({good_list:[1,2,3]})// 下拉刷新后,loading效果回弹if(this.data.good_list.length==3){wx.stopPullDownRefresh()}
}

在这里插入图片描述

3.scroll-view实现上拉加载更多,下拉刷新

我们再新建个页面
在这里插入图片描述

重新建个tarbar
在这里插入图片描述

#####wxml####

<scroll-view 
class="scroll"
scroll-y  # 运行y轴滑动
lower-threshold="100" # 距离底部还有100px时,触发事件
bindscrolltolower="handleGetData"# 事件处理函数refresher-enabled="true"        # 开启 下拉刷新
refresher-default-style="black" # 下拉默认样式
refresher-background="#f0f0f0"  # 下拉背景色
bindrefresherrefresh="handleReload" # 下拉触发事件
refresher-triggered="{{isRefresh}}" # 设置下拉回弹,false允许回弹,enable-back-to-top="true"  # 快速回到顶部,ios点顶部,安卓点tab
><view wx:for="{{goods}}" wx:key="index">{{item}}</view>
</scroll-view>

在这里插入图片描述

###wxss###

.scroll{/* 100vh就是指元素的高度等于当前浏览器的视窗高度,即浏览器内部的可视区域的高度大小 */height: 100vh; background-color: grey;
}view{height: 400rpx;display: flex;justify-content: center;align-items: center;
}
/* 奇数 */
view:nth-child(odd){background-color: pink;
}
/* 偶数 */
view:nth-child(even){background-color: green;
}

在这里插入图片描述

效果:
下拉刷新
在这里插入图片描述

上拉加载更多
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

期望20K,2年golang深圳某互联网小公司一面

后续约了二面&#xff08;CTO面&#xff09;&#xff0c;需要到现场&#xff0c;基本没问啥具体的技术知识&#xff0c;都是聊规划和个人职业目标 一面 1、假设访问百度网站&#xff0c;从在浏览器输入网址&#xff0c;到最终页面展示出来&#xff0c;中间会发生哪些事情&…

使用Python和wxPython将PNG文件转换为JPEG文件

简介&#xff1a; 在图像处理中&#xff0c;有时候我们需要将PNG格式的图像文件转换为JPEG格式。本篇博客将介绍如何使用Python编程语言和wxPython图形用户界面库&#xff0c;以及Pillow图像处理库来实现这一转换过程。通过本文的指导&#xff0c;您将学习如何快速将指定文件夹…

30分钟快速上手scapy

在前两篇博客中&#xff0c;笔者简单分享了如何使用scapy进行网络流量的分析&#xff0c;但比较粗略&#xff0c;没有详细说明&#xff0c;本文我们就0开始&#xff0c;一起快速学习一下scapy 框架的使用。 另附之前的两篇博客&#xff0c;有需要快速参考代码的请自取&#xf…

外贸如何找国外客户?

外贸客户开发国外客户可以使用多种软件来完成&#xff0c;以下是一些常用的软件推荐&#xff1a; 即时通讯软件&#xff1a; SKYPE&#xff1a;一款功能丰富的即时通讯软件&#xff0c;支持视频聊天、多人语音会议、文件传输等&#xff0c;方便与海外客户进行实时沟通。Line&a…

工具MyBatis Generator(MBG)

MyBatis Generator(MBG)&#xff0c;这是官方帮我们提供的一个自动生成代码的工具&#xff0c;前面的课程中&#xff0c;我们都是脑袋里想好&#xff0c;pojo有哪些属性&#xff0c;属性的类型是什么&#xff0c;对应的数据表中的字段名字是什么&#xff0c;匹配的类型是什么..…

用增之Firebase

目录 简介 开发准备&#xff1a; 1、在Firebase平台创建项目 2、将项目关联到应用 3、项目配置 简介 前面讲了google ddl部分&#xff0c;本篇为Firebase的事件上报部分&#xff0c;包括在FireBase平台创建应用 &#xff0c; 如果有用到ddl…

【网络安全的神秘世界】JavaScript

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 01-JavaScript简介 JavaScript背景 2003年之前&#xff0c;JavaScript被称为“牛皮藓”&#xff0c;用来制作页面上的广告、弹窗、漂浮的广告 2004年&a…

小猪APP分发:让APP封装变得如此简单

你是否曾经在开发完一款APP后&#xff0c;为了封装、分发而头疼不已&#xff1f;别担心&#xff0c;小猪APP分发来拯救你了&#xff01;这款神器不仅能让你的工作变得更加高效&#xff0c;还能让你的APP在各大平台上顺利分发。 小猪APP封装www.ppzhu.net APP封装的挑战 开发一…

2024-06-04 架构-不同层次的抽象的处理-分析

摘要: 2024-06-04 架构-不同层次的抽象的处理-分析. 不同层次的抽象: 将事情做不同的情况的解耦&#xff0c;关于在于理解事情本身的性质&#xff0c;如何解耦&#xff0c;如何处理当将事情解耦成不同的情况后&#xff0c;就可以针对不同的事情&#xff0c;最不同的处理。这么…

docker 停止重启容器命令start/stop/restart详解(容器生命周期管理教程-2)

Docker 提供了多个命令来管理容器的生命周期&#xff0c; 其中start、stop 和 restart。这些命令允许用户控制容器的运行状态。 1. docker start 命令格式&#xff1a; docker start [OPTIONS] CONTAINER [CONTAINER...]功能&#xff1a; 启动一个或多个已经停止的 Docker …

i.MX8MP平台开发分享(CSU控制器篇)

芯片使用 CSU&#xff08;Central Security Unit&#xff09; 来管理所有不直接支持安全&#xff08;如 CPU 内核&#xff09;的主/从设备的安全。 ATF中的CSU配置如下&#xff0c;OCARM和OCRAM_S被配置为了安全等级2&#xff0c;非锁定状态。 static const struct imx_csu_c…

WLAN工作原理

目录 一、引言二、FAT AP的工作模式与挑战三、FIT APAC的组网方式四、CAPWAPI隧道技术五、WLAN网络的关键报文六、漫游机制七、总结 一、引言 随着无线网络的迅猛发展&#xff0c;WLAN&#xff08;无线局域网&#xff09;技术已广泛应用于各个领域&#xff0c;为企业和个人提供…

若依 ruoyi-vue element-ui el-cascader 级联选择器 选择任意一级选项,去掉单选按钮,选中点击后隐藏

Cascader 级联选择器 选择任意一级选项&#xff0c;去掉单选按钮。 这兄弟文章写的可以&#xff0c;查了一堆文章&#xff0c;基本搞完才发现。 官方的例子不支持选中后自动关闭&#xff0c;要点击旁边空白&#xff0c;并且单选框太小了。 <el-form-item label"所属地…

基于SSM+Jsp的二手手机回收平台系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

libsystemctlm-soc项目分析

概述 libsystemctlm-soc项目是Xilinx的SystemC库。 环境安装 verilator安装 # Prerequisites: #sudo apt-get install git help2man perl python3 make autoconf g flex bison ccache #sudo apt-get install libgoogle-perftools-dev numactl perl-doc #sudo apt-get insta…

java 使用WebClient发送https请求

核心逻辑 绕过ssl证书检查 具体操作 话不多说上代码 // 构建WebClient public static WebClient createWebClient() throws SSLException {SslContext context SslContextBuilder.forClient().trustManager(InsecureTrustManagerFactory.INSTANCE).build();HttpClient htt…

JavaScript 从入门到精通Object(对象)

文章目录 对象文本和属性方括号计算属性 属性值简写属性名称限制属性存在性测试&#xff0c;“in” 操作符“for…in” 循环像对象一样排序 总结✅任务你好&#xff0c;对象检查空对象对象属性求和将数值属性值都乘以 2 对象引用和复制通过引用来比较克隆与合并&#xff0c;Obj…

Keil编译bin格式固件方法

打开Option选项卡&#xff0c;选择User&#xff0c;在After Build/Rebuild下面增加以下命令&#xff1a; fromelf.exe --bin -o "L.bin" "#L"

C++构建MVC学生信息管理系统

一、头文件创建数据结构 student.h #pragma once #include<vector>struct student //定义student结构体 说明学生的基本信息 { int id;char name[8];int age;int score; };class View { //定义窗口类 涵盖基本功能和学生数据 private:int id 1001; //初始学生idvecto…

四川菊乐食品IPO终止:收入增速放缓,内控缺陷遭关注,产能过剩

近日&#xff0c;深圳证券交易所披露的信息显示&#xff0c;四川菊乐食品股份有限公司&#xff08;下称“菊乐股份”或“菊乐食品”&#xff09;及其保荐人中信建投证券撤回上市申请文件。因此&#xff0c;深圳证券交易所决定终止对该公司首次公开发行股票并在主板上市的审核。…