《微信小程序开发从入门到实战》学习九十五

news/2024/7/20 2:39:11 标签: 微信小程序, 学习, 小程序

7.1 视图容器组件

7.1.4 movable-viewe和movable-area组件

scale属性用于设置是否支持双指缩放。默认支持缩放手势的区域是movable-view范围内,在movable-area组件上可以设置一个boolean类型的scale-area属性值为true时,可将缩放手势生效区域扩大为整个movable-area组件内。

movable-view与movable-area组件都需要设置width和height属性,如果不设置默认为10px。

7.1.5 cover-view组件和cover-image组件

小程序中,微信创建了一些原生组件,包括camera、canvas、input(仅在focus时表现为原生组件)、live-player、live-pusher、map、textarea和video组件。

原生组件与非原生组件是不同的渲染流程,在界面显示有一些差异。原生组件的层级高于非原生组件。页面中的非原生组件无论将z-index设置为多少。都无法覆盖在原生组件之上。

小程序提供了cover-view和cover-image组件解决了原生组件层级最高的限制。这两是原生组件,可以覆盖部分原生组件上,包括camera、canvas、live-player、live-pusher、map、video组件。

cover-view是可覆盖原生组件上的容器组件,它内部只能包含文本或者嵌套cover-view、cover-image和button,只能包含文本、图片或按钮。

cover-image不是容器组件,作用和image组件类似,可以显示一张图片。但cover-image显示的图片可以覆盖在原生组件上,image组件不可以。cover-image的src属性,用于指定图片的路径、即网络路径或临时路径,自基础库2.2.3版本起支持云文件ID。

微信开发工具上的原生组件是用web组件模拟的,可能不能很好地还原真机的表现,开发者在使用原生组件时应该尽量在真机上进行测试。

7.2 基础内容组件

在页面中如果需要展示一些内容时,往往需要使用一些基础内容组件。

7.2.1 text组件

text组件是最常见的组件,用于在页面显示一些文本内容。可阅读第2章的text组件介绍

7.2.2 icon组件

icon是十分常见的组件,用于在页面显示一些图标。可阅读第3章的icon组件介绍

7.2.3 image组件

image组件在页面显示图片。可阅读第3章的image组件介绍

7.2.4 progress组件

progress组件是一个进度条组件,在页面显示进度条数据。支持属性如下所示:

属性类型默认值说明最低版本
precentnumber百分比1.0.0
show-infobooleanfalse是否在进度条右侧显示百分比文字1.0.0
border-radiusnumber/string0圆角大小2.3.1
font-sizenumber/string16右侧百分比字体大小2.3.1
stroke-widthnumber/string6进度条线的宽度1.0.0
activeColorstring#09BB07已完成的进度条颜色1.0.0
backgroundColorstring#EBEBEB进度条从左往右的颜色1.0.0
activebooleanfalse进度条从左往右的动画1.0.0
active-modestringbackwards

backwards:动画从左往右播

forwards:动画从上次结束点接着播

1.7.0
bindactiveendeventhandle绑定动画完成事件监听函数2.4.1


http://www.niftyadmin.cn/n/5349521.html

相关文章

对齐大型语言模型与人类偏好:通过表示工程实现

1、写作动机: 强化学习表现出相当复杂度、对超参数的敏感性、在训练过程中的不稳定性,并需要在奖励模型和价值网络中进行额外的训练,导致了较大的计算成本。为了解决RL方法带来的上述挑战,提出了几种计算上轻量级的替代方案&…

nginx如何运行在ipv6上

1.nginx运行在ipv6上需要 --with-ipv6 模块 --with-http_stub_status_module --with-http_ssl_module --with-stream --with-ipv6 2.nginx配置文件设置 server {#listen 8080;listen [::1]:8080;server_name localhost;root /www/;index index.html; }3.重启nginx [rootloc…

Python高超音速导弹

Python高超音速导弹的全自动化开发研发具有重要性的原因如下: 提高研发效率:全自动化开发可以通过自动化工具和流程,快速完成各种任务,包括代码编写、测试、集成和部署等。这样可以大大提高研发效率,缩短开发周期。 减…

【开源】基于JAVA语言的班级考勤管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统基础支持模块2.2 班级学生教师支持模块2.3 考勤签到管理2.4 学生请假管理 三、系统设计3.1 功能设计3.1.1 系统基础支持模块3.1.2 班级学生教师档案模块3.1.3 考勤签到管理模块3.1.4 学生请假管理模块 3.2 数据库设…

Java强训day5(选择题编程题)

选择题 public class Main {public static void main(String[] args) {int x, y;x 5 >> 2;//101 5//001System.out.println(x);//1y x >>> 2;//无符号右移//001 //0System.out.println(y);//0} }public class Main {public static void main(String[] args) …

幻兽帕鲁服务器多少钱?2024年Palworld游戏主机费用

幻兽帕鲁服务器多少钱?价格便宜,阿里云4核16G幻兽帕鲁专属服务器32元1个月、66元3个月,4核32G配置113元1个月、339元3个月;腾讯云4核16G14M服务器66元1个月、277元3个月、1584元一年。阿腾云atengyun.com分享阿里云和腾讯云palwor…

ubuntu 编译使用 liblas 读取点云

在ubuntu上使用las读取点云 1、环境配置 1.1、安装libgeotiff 下载依赖 sudo apt-get install libtiff-dev //安装libtiff sudo apt-get install libproj-dev //安装libproj下载源码,编译 如下该是libgeotiff-1.3.0版本安装包 wget https://download.osgeo.o…

编程笔记 html5cssjs 058 css计数器

编程笔记 html5&css&js 058 css计数器 一、带计数器的自动编号二、嵌套计数器三、CSS 计数器属性练习小结 CSS 计数器是由 CSS 保持的“变量”,其值可以通过 CSS 规则递增(以跟踪其使用次数)。计数器使您可以根据内容在文档中的位置来…