小程序中各个组件以及其作用

devtools/2024/9/24 10:15:51/

各位小伙伴又见面啦,今天我们来学习微信小程序中包含但不限于使用的组件以及常见API。废话不多说,我们马上进入正题。

一,常见组件

组件是小程序应用中可缺失的一部分,就像吃羊头没有老马家的满口香椒盐的浇给,索然无味。

1,scroll-view

功能描述

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

  1. 横向滚动需打开 enable-flex 以兼容 WebView,如 <scroll-view scroll-x enable-flex style="flex-direction: row;"/>
  2. 滚动条的长度是预估的,若直接子节点的高度差别较大,则滚动条长度可能会不准确
  3. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

2,swiper

功能描述

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。

  1. 使用 worklet 函数需要开启开发者工具 "将 JS 编译成 ES5" 或 "编译 worklet 函数" 选项。

3,view

重中之重!!!孩子们记住了(敲黑板)

功能描述

视图容器

示例代码

<view class="container"><view class="page-body"><view class="page-section"><view class="page-section-title"><text>flex-direction: row\n横向布局</text></view><view class="page-section-spacing"><view class="flex-wrp" style="flex-direction:row;"><view class="flex-item demo-text-1"></view><view class="flex-item demo-text-2"></view><view class="flex-item demo-text-3"></view></view></view></view><view class="page-section"><view class="page-section-title"><text>flex-direction: column\n纵向布局</text></view><view class="flex-wrp" style="flex-direction:column;"><view class="flex-item flex-item-V demo-text-1"></view><view class="flex-item flex-item-V demo-text-2"></view><view class="flex-item flex-item-V demo-text-3"></view></view></view></view>
</view>

4,button

功能描述

按钮。

5,checkbox

功能描述

多选项目。

6,input

功能描述

输入框。

7,label

功能描述

用来改进表单组件的可用性。

使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for的优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。

8,form

功能描述

表单。将组件内的用户输入的switch,input,checkbox,slider,radio,picker提交。

当点击form表单中form-type为submit的button组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name来作为key。

9,camera

功能描述

系统相机。扫码二维码功能。

10,image

功能描述

图片。支持JPG,PNG,SVG,WEBP,GIF,等格式。

  1. 使用svg格式且mode=scaleToFil时,WebView会居中。
  2. svg格式不支持百分比单位
  3. svg格式不支持<style>element

以上就是十种小程序中常用的组件,接下来我们将认识几种小程序中常见的API

二,常见API

1,wx.showToast(Object object)

功能描述

显示消息提示框。

2,wx.showLoading(Object object)

功能描述

显示加载的提示框。

3,wx.hideToast(Object object)

功能描述

隐藏消息提示框。

4,wx.hideLoading(Object object)

功能描述

隐藏加载提示框。

5,wx.startPullDownRefresh(Object object)

功能描述

开始下拉刷新,调用后触发下拉刷新动画,效果与手动下拉刷新一致。

以上就是微信小程序中常用的五种API


http://www.ppmy.cn/devtools/53673.html

相关文章

网站防被iframe嵌套方法

在Nginx中添加Content-Security-Policy头&#xff0c;特别是设置frame-ancestors none来禁止页面被嵌入到任何iframe中&#xff0c;可以通过修改Nginx的配置文件来实现。这有助于提高网站的安全性&#xff0c;防止点击劫持等攻击。下面是具体的操作步骤&#xff1a; 打开Nginx配…

浅谈网络通信(3)

文章目录 一、TCP[!]1.1、TCP协议报文格式1.2、TCP十大机制1.2.1、确认应答机制1.2.2、超时重传机制1.2.3、连接管理机制1.2.3.1、三次握手[其流程至关重要&#xff0c;面试必考]1.2.3.2.1、那为啥要建立连接&#xff1f;&#xff1f;建立连接的意义是啥&#xff1f;&#xff1…

【递归、搜索与回溯】综合练习二

综合练习二 1.组合2.目标和3.组合总和4.字母大小写全排列 点赞&#x1f44d;&#x1f44d;收藏&#x1f31f;&#x1f31f;关注&#x1f496;&#x1f496; 你的支持是对我最大的鼓励&#xff0c;我们一起努力吧!&#x1f603;&#x1f603; 1.组合 题目链接&#xff1a;77. 组…

MySQL 考证作用

提升个人技能&#xff1a;参加MySQL考证的过程本身就是一个学习和提升的过程。考生需要系统地复习和掌握MySQL的相关知识和技能&#xff0c;这有助于提升个人的专业能力和技术水平。增强就业竞争力&#xff1a;在求职过程中&#xff0c;拥有MySQL认证证书可以作为一个加分项&am…

国际数字影像产业园:致力于园区数字化和智能化的发展

数字化和智能化发展策略 数字化基础设施建设&#xff1a;园区提供高标准的基础设施建设&#xff0c;包括高速网络、数据中心等&#xff0c;为入园企业提供稳定、高效的网络和数据服务。通过数字化技术的应用&#xff0c;实现园区内信息的快速传递和资源的优化配置&#xff0c;…

Transformer学习理解

1.前言 本文介绍当下人工智能领域的基石与核心结构模型——Transformer&#xff0c;为什么说它是基石&#xff0c;因为以ChatGPT为代表的聊 天机器人以及各种有望通向AGI&#xff08;通用人工智能&#xff09;的道路上均在采用的Transformer。 Transformer也是当下NLP任…

SQL Server几种琐

SQL Server 中的锁类型主要包括以下几种&#xff0c;它们用于控制并发访问和数据一致性&#xff1a; 1. 共享锁&#xff08;Shared Lock&#xff0c;S 锁&#xff09;&#xff1a; - 用于读取操作&#xff08;如 SELECT 语句&#xff09;。 - 允许多个事务同时读取同一资…

django学习入门系列之第二点《案例2:用户注册改进》

文章目录 更改提交数据类型提交数据/返回数据到后台界面接收数据总结往期回顾 更改提交数据类型 #methods - 提交方式 #methods [提交的数据类型] #GET - 直接提交 #POST - 藏起来提交 app.route(/register,methods [GET])提交数据/返回数据到后台 <!-- 需要返回什么数…