微信小程序知识点(二)

1.下拉刷新事件

如果页面需要下拉刷新功能,则在页面对应的json配置文件中,将enablePullDownRefresh配置设置为true,如下

{"usingComponents": {},"enablePullDownRefresh": true
}

2.上拉触底事件

在很多时候,我们在浏览一些购物网站的时候,往上拉的时候都是动态加载新的数据信息,这个时候就需要用到页面的上拉触底事件,来进行新数据的获取和加载,我们在对应的页面下的js文件中onReachBottom()事件进行监听处理,就可以对上拉触底就行功能编写:

例如我们在一个界面上获取随机颜色加载的案例,

a.我们在data中定义一个colorList来获取随机颜色集合
  data: {colorList:[]     },
b.通过wx:request来调用接口获取随机颜色数据,并且在页面的onLoad事件中调用,目的是为了一进来页面就进行接口的调用
getColors(){wx.request({url: 'https://applet-base-api-t.itheima.net/api/color',method:"GET",success:({data:res}) => {console.log(res)this.setData({colorList:[...this.data.colorList,...res.data]})}})},/*** 生命周期函数--监听页面加载*/onLoad(options) {this.getColors()},
c.在页面中通过wx:for的方法动态显示颜色块
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">
{{item}}
</view>
d.在onReachBottom()方法中同样调用getColors方法来实现每次上拉到底的时候获取新的数据进行拼接显示
 /*** 页面上拉触底事件的处理函数*/onReachBottom() {this.getColors()},
e.添加loading提示效果,

通过wx:showLoading(Object object)方法,注意,需要主动调用wx:hideLoading才能关闭提示,

f.最终我们可以看到上拉的效果如下:

上拉触底


3.自定义组件Component

自定义组件指的是自己定义的可以被其他页面引用的component组件,它与页面不同,类似于winform中Form窗口和userControl用户空间的区别。一个用户空间可以被多个窗口使用,同样的一个用户组件Component可以被多个Page引用,自定义组件包括局部组件全局组件:

3.1局部组件:

定义在单独页面中的组件,在某一个页面中的.json文件中的usingComponent节点中来定义,如下:

 "usingComponents": {"my-test1":"/component/test/test"},

然后在对应的页面中直接引用即可:

<my-test1></my-test1>
3.2全局组件

全局组件是定义中小程序外部的app.json中的,同样在app.json文件中增加usingComponents节点进行配置:如下:

{"usingComponents": {"global-test":"/component/test/test"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents"
}

在app.json文件定义之后,便可以在该小程序的任何页面中进行引用。

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

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

相关文章

《互联网内容审核实战》:搭建团队到绩效激励,一书在手全搞定!“

&#x1f310;在数字时代的浩瀚海洋中&#xff0c;互联网视频、图片、文字等内容如同潮水般汹涌澎湃&#xff0c;它们以惊人的速度传播&#xff0c;连接着世界的每一个角落。这股信息洪流不仅丰富了我们的视野&#xff0c;也带来了前所未有的挑战——如何在享受信息便利的同时&…

Kaggle竞赛——手写数字识别(Digit Recognizer)

目录 1. 数据集介绍2. 数据分析3. 数据处理与封装3.1 数据集划分3.2 将数据转为tensor张量3.3 数据封装 4. 模型训练4.1 定义功能函数4.1 resnet18模型4.3 CNN模型4.4 FCNN模型 5. 结果分析5.1 混淆矩阵5.2 查看错误分类的样本 6. 加载最佳模型7. 参考文献 本次手写数字识别使用…

Lenze伦茨E82ZBC, E82ZBB E82ZMBRB安装说明手测

Lenze伦茨E82ZBC, E82ZBB E82ZMBRB安装说明手测

景联文科技:提供高质量多模态数据标注,推动智能化转型

随着人工智能技术的快速发展&#xff0c;多模态数据标注成为推动智能系统更深层次理解和应用的关键技术之一。 作为行业领先的多模态数据标注服务商&#xff0c;景联文科技凭借其在技术、流程和人才方面的综合优势&#xff0c;推出了全面的多模态标注解决方案&#xff0c;助力…

828华为云征文|部署电影收藏管理器 Radarr

828华为云征文&#xff5c;部署电影收藏管理器 Radarr 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 应用场景1.3 性能模式 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 Radarr3.1 Radarr 介绍3.2 Docker 环境搭建3.3 Radarr 部署3.4 R…

枚举: C++和Python实现鸡兔同笼问题

作者制作不易&#xff0c;关注、点赞、收藏一下吧&#xff01; 目录 1.Python实现 2.C实现 1.Python实现 首先&#xff0c;我们需要输入头和脚的数量: head int(input("请输入头的数量: ")) feet int(input("请输入脚的数量: ")) input() 实现输入…

ChauffeurNet:通过模仿最佳驾驶和合成最坏情况进行学习驾驶

ChauffeurNet: Learning to Drive by Imitating the Best and Synthesizing the Worst ChauffeurNet&#xff1a;通过模仿最佳驾驶和合成最坏情况进行学习驾驶 https://arxiv.org/abs/1812.03079 Abstract Our goal is to train a policy for autonomous driving via imit…

基于卷积神经网络的磨削平板类零件擦伤检测

基于卷积神经网络的磨削平板类零件擦伤检测 前言正文 前言 还记得读研那会儿刚学习完了卷积神经网络&#xff0c;初步学会了最基础的分类问题&#xff0c;当时也有点python基础&#xff0c;同时对TensorFlow也有点入门了。正好我的课题中有一类缺陷比较难以用传统方法识别判断&…

【LeetCode】01.两数之和

题目要求 做题链接&#xff1a;1.两数之和 解题思路 我们这道题是在nums数组中找到两个两个数使得他们的和为target&#xff0c;最简单的方法就是暴力枚举一遍即可&#xff0c;时间复杂度为O&#xff08;N&#xff09;&#xff0c;空间复杂度为O&#xff08;1&#xff09;。…

【JAVA入门】Day34 - Stream流

【JAVA入门】Day34 - Stream流 文章目录 【JAVA入门】Day34 - Stream流一、Stream 流的作用和使用步骤1.Stream流的创建&#xff0c;数据的添加2. Stream流的中间方法3. Stream流的终结方法 Stream 流有什么作用&#xff1f;我们看一个例子&#xff1a; 【练习】需求&#xff…

C++入门(01)VisualStudio2022社区版HelloWorld

文章目录 1. 下载社区版2. 安装3. 启动4. 创建新项目5. C空项目6. 项目名称和位置7. 创建后&#xff0c;出现“新增功能”&#xff0c;关闭即可8. 解决方案和项目9. 新建源文件10. 编辑第一个C程序11. 运行该程序12. Debug文件夹13. 用好Microsoft Learn 1. 下载社区版 访问&a…

JavaScript 循环分支语句-dowhile循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块&#xff0c;然后如果条件为真的话&#xff0c;就会重复这个循环。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta htt…

网页时装购物系统:Spring Boot框架的创新设计

第1章 绪论 1.1背景及意义 随着社会的快速发展&#xff0c;计算机的影响是全面且深入的。人们生活水平的不断提高&#xff0c;日常生活中人们对时装购物系统方面的要求也在不断提高&#xff0c;喜欢购物的人数更是不断增加&#xff0c;使得时装购物系统的开发成为必需而且紧迫的…

一种非接触式智能垃圾桶设计(论文+源码+实物)

1系统方案设计 通过对需求展开分析&#xff0c;本设计非接触式智能垃圾桶采用STM32F103单片机作为控制器&#xff0c;通过红外传感器实现垃圾桶的满溢检测&#xff0c;通过三个SG90舵机分别控制可回收、不可回收、其他垃圾桶盖的开关&#xff0c;并通过WiFi通信模块将数据信息…

EmguCV学习笔记 VB.Net 9.2 VideoWriter类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

c++一个数因子和(快速求解)

void 一个数因子和(int 整数) {//缘由https://ask.csdn.net/questions/1054457#answer_1251715int he 0, j 0; string a "";while (j < 整数)if (!(整数%j))he j, a to_string(j) "";cout << a << "的因子和&#xff1a;" …

Opencv中的直方图(1)计算反向投影直方图函数calcBackProject()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算直方图的反向投影。 cv::calcBackProject 函数计算直方图的反向投影。也就是说&#xff0c;类似于 calcHist&#xff0c;在每个位置 (x, y)…

ITK-高斯滤波

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 高斯滤波原理 高斯滤波&#xff08;Gaussian Blur&#xff09;是数字图像处理中常见的一种平滑滤波器&#xff0c;旨在通过模糊处…

OpenCV结构分析与形状描述符(10)检测并提取轮廓函数findContours()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在二值图像中查找轮廓。 该函数使用算法 253从二值图像中检索轮廓。轮廓是有用的工具&#xff0c;可用于形状分析和对象检测与识别。参见 OpenC…

Linux下安装MySQL8.0

一、安装 1.下载安装包 先创建一个mysql目录&#xff0c;在将压缩包下载到此 # 下载tar包 wget https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.20-linux-glibc2.12-x86_64.tar.xz等待下载成功 2.解压mysql8.0安装包 tar xvJf mysql-8.0.20-linux-glibc2.12-x86…