微信小程序知识点(二)

news2024/9/27 17:30:46

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.coloradmin.cn/o/2109771.html

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

相关文章

【JAVA数据结构】简单洗牌算法——ArrayList(顺序表)使用实例

详细知识讲解请跳转&#xff1a;【JAVA数据结构】&#xff08;ArrayList&#xff09;顺序表-CSDN博客 一. 简单的洗牌算法 特殊知识须记&#xff1a; List < List<E> > 该语法情况比较特殊&#xff0c;相当于一个“二维数组”存着一个个线性表的结构&#xff0…

火星舱MSA-DRS-E24H更换故障硬盘流程(已踩坑)

该设备是2017年采购的&#xff0c;主要使用数字资源站&#xff08;即文件共享功能&#xff09;&#xff1b;更换硬盘之前出过一次故障&#xff0c;所有硬盘灯&#xff0c;网口灯全部不亮&#xff0c;最后维修了主板&#xff0c;可以正常进入系统了&#xff0c;但是发现了一块硬…

Nature子刊:教你零基础开展微生物组数据分析和可视化

使用MicrobiomeAnalyst进行微生物组数据的全面统计、功能和元分析 Using MicrobiomeAnalyst for comprehensive statistical, functional, and meta-analysis of microbiome data Nature Protocols Impact Factor 11.334 https://doi.org/10.1038/s41596-019-0264-1 发表日…

【机器学习】从零开始理解深度学习——揭开神经网络的神秘面纱

【机器学习】从零开始理解深度学习——揭开神经网络的神秘面纱 1. 引言 深度学习是机器学习的一个重要分支&#xff0c;通过多层神经网络处理复杂数据&#xff0c;广泛应用于图像识别、自然语言处理等领域。我们将在这篇文章中揭开深度学习和神经网络的神秘面纱。 2. 什么是…

ABAP CURSOR游标的应用1

【应用场景】BW模块定时增量抽取SAP的销售案场收款单的业务主数据 【关键语法】 FUNCTION ZBWFM_ZTSD0011 . *"---------------------------------------------------------------------- *"*"本地接口&#xff1a; *" IMPORTING *" VALUE(I_REQ…

ipad如何强制关机重启

背景起因 上午同事小孩ipad死机了&#xff0c;输入密码没有反应&#xff0c;无法进入设备&#xff0c;使用下面的方法都无法强制关机重启 长按电源键N秒长按 电源键任意音量键&#xff08;出现滑动关机按钮 但无法滑动&#xff09;悬浮球--->更多--->设备--->重启 无…

骨传导耳机哪款好?精选五款热门骨传导耳机分享让你避免踩雷

目前在市面当中&#xff0c;骨传导耳机被称之为是黑科技耳机&#xff0c;骨传导耳机拥有很多优势&#xff0c;在听歌时不需要入耳&#xff0c;不会伤耳朵。随着骨传导耳机品牌的不断发展&#xff0c;人们在选购骨传导耳机时&#xff0c;也会觉得非常困难&#xff0c;可能一不小…

开源 AI 智能名片小程序在内容营销中的应用与价值

摘要&#xff1a;本文深入探讨在消费升级的时代背景下&#xff0c;开源 AI 智能名片小程序如何在内容营销中发挥重要作用。阐述了内容营销通过图片、文字、视频等媒介传播相关内容信息给目标用户以促进销售及实现营销目的的过程。分析了开源 AI 智能名片小程序作为一种新型营销…

​可看见车辆行人的实时高清视频第1辑

我们在《全球著名地标卫星影像收藏第4辑》分享了10个全球著名地标卫星影像&#xff0c;不过卫星影像是静态的照片。 现在我们为你分享可看见车辆行人的实时动态高清视频&#xff0c;这些视频来自公开的高清摄像头实时直播画面。 我们在文末为你分享了这些实时直播摄像头的点位…

@vueup/vue-quill使用quill-better-table报moduleClass is not a constructor

quill官方中文文档&#xff1a;https://www.kancloud.cn/liuwave/quill/1434144 扩展表格的使用 注意&#xff1a;想要使用表格 quill的版本要是2.0以后 升级到这个版本后 其他一些插件就注册不了了。 安装&#xff1a; npm install quilllatest 版本需要大于2.0版本 npm…

Maven教程——从入门到入坑

第1章 为什么要使用Maven 1.1 获取第三方jar包   开发中需要使用到的jar包种类繁多&#xff0c;获取jar包的方式都不尽相同。为了查找一个jar包找遍互联网&#xff0c;身心俱疲。不仅如此&#xff0c;费劲心血找到的jar包里有的时候并没有你需要的那个类&#xff0c;又或者有…

张飞硬件11~19-电容篇笔记

电容作用 作为源&#xff0c;对后级电路提供能量&#xff0c;对源进行充电。简单讲就是放电和充电。在电路设计中&#xff0c;源往往与负载相隔很远&#xff0c;增加电容就可以起到稳定作用。电容两端的电压不能激变&#xff0c;增加电容可以稳定电压。 电容可以类比为水坝&a…

Git创建本地仓库

一、创建本地空仓库 1、创建项目文件夹 创建一个全新的文件夹&#xff0c;在文件夹中右键&#xff0c;就会显示出来以下两项&#xff1a; 2、初始化仓库 点击第二个&#xff0c;就会在此目录进入 git 的命令行&#xff0c;然后在命令行中输入以下指令&#xff0c; git init…

Ubuntu 22.04 系统中 ROS2安装

Ubuntu 22.04 系统中 ROS2安装 ROS2安装 # 多窗口终端工具 sudo apt update sudo apt install tilix打开软件&#xff0c;点击右上角图标进入设置 -> General -> size120, columns:48Command -> 勾选第一个 Run command as login shellColor -> Theme Color 选择…

C++ 设计模式——解释器模式

目录 C 设计模式——解释器模式1. 主要组成成分2. 逐步构建解释器模式步骤1: 定义抽象表达式步骤2: 实现终结符表达式步骤3: 实现非终结符表达式步骤4: 构建语法树步骤5: 实现内存管理步骤6: 创建上下文和客户端 3. 解释器模式 UML 图UML 图解析 4. 解释器模式的优点5. 解释器模…

STM32学习笔记4 --- USART

目录 通信接口1 USART 串口的通信协议 硬件部分&#xff1a; 软件部分&#xff1a; 字节数据的传递&#xff1a; stm32内部的USART外设 串口发送 串口发送接收 Hex数据包 文本数据包 数据包的收发流程 串口收发Hex数据包 串口收发文本数据包 通信接口1 USART US…

麦克风品牌排行榜前十名,浩瀚、西圣、优篮子领夹麦克风测评PK

​我是一名数码测评师&#xff0c;对各类数码都颇为了解&#xff0c;特别是无线麦克风这种使用频繁的设备&#xff0c;已经上手测评过众多产品。然而测评过程中发现&#xff0c;市场上存在不少劣质产品&#xff0c;打着知名品牌却用着成本很低的材料&#xff0c;性能说很强&…

无人机之摄像头篇

无人机的摄像头是无人机系统中的一个重要组成部分&#xff0c;它承担着捕捉视频和图像的关键任务。随着技术的不断发展&#xff0c;无人机摄像头在分辨率、稳定性、视角、夜视能力、变焦功能以及数据传输等方面都有了显著的进步。以下是一些关于无人机摄像头的主要特点和类型&a…

足球预测可以人工智能AI吗

足球预测可以使用人工智能&#xff08;AI&#xff09;进行&#xff0c;AI在分析数据的速度和精度方面具有显著优势。通过综合考虑球员状态、战术布局、队伍历史表现等众多因素&#xff0c;AI技术可以提供高精度的比赛预测。其中&#xff0c;最值得关注的是AI的机器学习能力&…

9月报名 | 海克斯康电子散热从入门到精通培训

您好&#xff01;感谢您长期以来对优飞迪科技与海克斯康的关注与支持。我们诚邀您参加9月23日-24日的海克斯康电子散热从入门到精通培训&#xff0c;本次培训将帮助您更好了解电子散热基础理论知识、CFD仿真流程及规范、电子散热中所遇现象的分析方法&#xff0c;以及通过采用s…