uni-app快速入门(八)--常用内置组件(上)
uni-app提供了一套基础组件,类似HTML里的标签元素,不推荐在uni-app中使用使用div等HTML标签。在uni-app中,对应<div>的标签是view,对应<span>的是text,对应<a>的是navigator,常用uni-app组件见nulluni-app,uniCloud,serverless,介绍,基本用法,对齐方式,表单校验,如何使用,校验规则说明,rules 属性说明,validateFunction 自定义校验规则使用说明,validateFunction 异步校验,动态表单校验,表单校验时机说明,API,Forms Prophttps://zh.uniapp.dcloud.io/component/uniui/uni-forms.html在官网中,uni-app 介绍了内置组件和扩展组件。
1、view组件
view为视图容器,类似html的div,用于包裹各种元素内容,是页面布局最常用的标签。
view组件和传统的div有一定的区别,div的演示和事件效果都是由css和javascript实现的,而
view组件支持css样式的同事自带事件效果属性。view组件有四个属性:
示例:
<view class="parent-box" hover-class="box-active">
<view class="box" hover-class="box-active" hover-start-time="3000" hover-stay- time="3000"
:hover-stop-propagation="true">微信小程序平台</view>
</view>
2、scroll-view组件
scroll-view(可滚动视图区域)用于区域滚动,类似 H5的iScrolll效果,使用非常广泛,如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载更多等。scroll-view的属性也非常多,较常用的有scroll-x、scroll-y、scroll-top、scroll-left、@scroll等。具体属性介绍见官方文档:
scroll-view | uni-app官网uni-app,uniCloud,serverless,scroll-view,属性说明,示例,自定义下拉刷新,webview中使用scroll-view的注意,其他注意事项https://zh.uniapp.dcloud.io/component/scroll-view.html这么都属性可能不太好记,大家可以在项目实际开发时根据实际需要再详细了解不同的属性。
3、swiper组件
swiper滑块视图容器组件的最常用功能就是制作轮播图效果,一般用于左右滑动或上下滑动,和上面的滚动切换是有区别的,滑块切换是一屏一屏地切换,swiper下面的每个swiper-item都是一个滑动切换区域,不能停留在2个滑动切换区域之间,属性介绍参考官方文档:https://zh.uniapp.dcloud.io/component/swiper.htmluni-app,uniCloud,serverless,swiper,easing-function,swiper-itemhttps://zh.uniapp.dcloud.io/component/swiper.html
示例:
打开HBuilderX,让之前生成的Demo项目的pages/index/index.vue的内容替换下面的:
<template>
<view>
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500" indicator-color="#000000" indicator-active-color="#0000FF">
<swiper-item v-for="(item,index) in images" :key="index">
<image :src="item.path"></image>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
name: "swiper-component",
data() {
return {
images:[
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
},
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
},
{
path:"//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
}
]
}
}
}
</script>
<style scoped>
.swiper{width:100%;height:400rpx;}
.swiper image{width:100%;height:100%}
</style>
然后运行到小程序模拟器-微信开发者工具,运行效果:
4、movable-area和movable-view
movable-area是可拖动区域组件,movable-view是可移动视图组件,这2个组件搭配使用可实现在页面中拖动滑动或双指缩放功能。
movable-area指可拖动范围,在其中可内嵌movable-view用于指示可拖动区域,即手指或鼠标按住 movable-view托众或双指缩放,但拖不出movable-area规定的范围。
movable-area官方文档参考:
movable-area | uni-app官网uni-app,uniCloud,serverless,movable-areahttps://zh.uniapp.dcloud.io/component/movable-area.htmlmovable-view官方文档参考:
movable-view | uni-app官网uni-app,uniCloud,serverless,movable-viewhttps://zh.uniapp.dcloud.io/component/movable-view.html
5、text和rich-text组件
【text组件】
在uni-app中,纯文字建议用text组件包裹,以实现长按选择文字、连续空格、解码功能。rich-text富文本组件可解析HTML标签,通常用于显示商品介绍、文章内容等应用场景。
text组件属性介绍参考官方文档:
text组件 | uni-app官网uni-app,uniCloud,serverless,text组件,属性说明,子组件,Tips,示例https://zh.uniapp.dcloud.io/component/text.html页面示例:
<template>
<view>
<text :decode="true" space="nbsp" :selectable="true">{{text}}</text>
</view>
</template>
<script>
export default {
name: "text-component",
data(){
return {
text:"我是<text> 组件"
}
}
}
</script>
<style scoped>
</style>
:decode="true" 表示可将文本中的特殊字符解码成原始文本。
【rich-text组件】
rich-text组件支持部分HTML节点及属性。官方文档参考:
rich-text | uni-app官网uni-app,uniCloud,serverless,rich-texthttps://zh.uniapp.dcloud.io/component/rich-text.html rich-text的具体使用会比较复杂。其中nodes属性可绑定type为text的数组和type为node 数组。这里暂不做详细说明。大家可网上找下详细的示例。
相关文章:

uni-app快速入门(八)--常用内置组件(上)
uni-app提供了一套基础组件,类似HTML里的标签元素,不推荐在uni-app中使用使用div等HTML标签。在uni-app中,对应<div>的标签是view,对应<span>的是text,对应<a>的是navigator,常用uni-app…...

基于Amazon Bedrock:一站式多模态数据处理新体验
目录 引言 关于Amazon Bedrock 基础模型体验 1、进入环境 2、发现模型及快速体验 3、打开 Amazon Bedrock 控制台 4、通过 Playgrounds 体验模型 (1)文本生成 (2)图片生成 关于资源清理 结束语 引言 在云计算和人工智能…...
FAX动作文件优化脚本(MAX清理多余关键帧插件)
大较好,为大家介绍一个节省FBX容量的插件!只保留有用的动画轴向,其他不参与动画运动的清除! 一.插件目的:: 1.我们使用的U3D引擎产生的游戏资源包容量太大,故全方位优化动画资源; 2.在max曲线编辑器内,点取轴向太过麻烦,费事,直观清除帧大大提高效率。 如: 二:…...

Chapter 2 - 16. Understanding Congestion in Fibre Channel Fabrics
Transforming an I/O Operation to FC frames A read or write I/O operation (Figure 2-28) between an initiator and a target undergoes a series of transformations before being transmitted on a Fibre Channel link. 启动程序和目标程序之间的读取或写入 I/O 操作(图…...
mysql数据库(六)pymysql、视图、触发器、存储过程、函数、流程控制、数据库连接池
pymysql、视图、触发器、存储过程、函数、流程控制、数据库连接池 文章目录 pymysql、视图、触发器、存储过程、函数、流程控制、数据库连接池一、pymysql二、视图三、触发器四、存储过程五、函数六、流程控制七、数据库连接池 一、pymysql 可以使用pip install pymysql安装py…...
RFdiffusion EuclideanDiffuser类解读
EuclideanDiffuser 是 RFdiffusion 中的一个关键类,专门设计用于对**三维空间中的点(如蛋白质的原子坐标)**进行扩散处理。它通过逐步向这些点添加噪音来实现扩散过程,从而为扩散模型提供输入数据,并通过逆扩散还原这些数据。 get_beta_schedule函数源代码 def get_beta…...
Flutter实现气泡提示框学习
前置知识点学习 GlobalKey GlobalKey 是 Flutter 中一个非常重要的概念,它用于唯一标识 widget 树中的特定 widget,并提供对该 widget 的访问。这在需要跨越 widget 树边界进行交互或在 widget 树重建时保持状态时尤其有用。 GlobalKey 的作用 唯一标…...

vue3 路由守卫
在Vue 3中,路由守卫是一种控制和管理路由跳转的机制。它允许你在执行导航前后进行一些逻辑处理,比如权限验证、数据预取等,从而增强应用的安全性和效率。路由守卫分为几种不同的类型,每种类型的守卫都有其特定的应用场景。 其实路…...

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.
操作环境: MATLAB 2022a 1、算法描述 北方苍鹰优化算法(Northern Goshawk Optimization,简称NGO)是一种新兴的智能优化算法,灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽,广泛分布于北…...

如何控制自己玩手机的时间?两台苹果手机帮助自律
对一些人来说,被智能手机“绑架”是一件心甘情愿的事,和它相处的一天中,不必面对现实的压力,它就像个“舒适区”。这是因为在使用手机的过程中,应用程序(尤其是游戏和社交媒体应用)会不断刺激大…...

【java-Neo4j 5开发入门篇】-最新Java开发Neo4j
系列文章目录 前言 上一篇文章讲解了Neo4j的基本使用,本篇文章对Java操作Neo4j进行入门级别的阐述,方便读者快速上手对Neo4j的开发。 一、开发环境与代码 1.docker 部署Neo4j #这里使用docker部署Neo4j,需要镜像加速的需要自行配置 docker run --name…...
Python的3D可视化库 - vedo (1)简介和模块功能概览
文章目录 1. vedo和它支持的功能简介1.1 安装vedo1.2 命令行接口1.3 导出3D文件1.4 文件格式转换 2. vedo模块功能概览2.1 绘制和渲染visual 管理可视化、对象及其属性的显示的基类plotter 3D渲染colors 定义和显示颜色dolfin FEniCS/Dolfin库的支持 2.2 图形数据管理mesh 多边…...

全面解析:HTML页面的加载全过程(一)--输入URL地址,与服务器建立连接
用户输入URL地址,与服务器建立连接 用户在浏览器地址栏输入一个URL 浏览器开始执行以下三步操作操作:url解析、DNS查询、TCP连接 第一步:URL解析 什么是URL? URL(Uniform Resource Locator,统一资源定位符)是互联网…...

elasticsearch的倒排索引是什么?
大家好,我是锋哥。今天分享关于【elasticsearch的倒排索引是什么?】面试题。希望对大家有帮助; elasticsearch的倒排索引是什么? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 倒排索引(Inverted Index&a…...
Ubuntu VNC Session启动chromium和firefox报错
问题描述 VNC客户端连接到Ubuntu Server后,启动chromium和firefox时报错: $ chromium [348564:348564:1117/102143.085649:ERROR:ozone_platform_x11.cc(244)] Missing X server or $DISPLAY [348564:348564:1117/102143.085732:ERROR:env.cc(258)] Th…...

【Tealscale + Headscale + 自建服务器】异地组网笔记
文章目录 效果为什么要用 Headscale云服务器安装 Headscale配置 config.yaml创建反向代理搭建管理 UI授权管理 UI添加互联设备参考 效果 首先是连接情况,双端都连接上自建的 Headscale, 手机使用移动流量,测试一下 ping 值 再试试进入游戏 可…...
C++ 编程基础(8)模版 | 8.2、函数模版
文章目录 一、函数模版1、声明与定义2、模版参数3、模板的实例化3.1、隐式实例化3.2、显示实例化 4、模版的特化5、注意事项6、总结 前言: C 函数模板是一种强大的特性,它允许程序员编写与类型无关的代码。通过使用模板,函数或类可以处理不同…...

Android Studio音频视频播放器课程设计
这个项目适合刚刚学习Android studio的初学者,实现音视频的基本播放功能,各项功能的页面都做的比较简单,特别适用于初学者,其特点在于本项目抛开了各种花里胡哨的制作,以最接近初学者的样式画面呈现,完全不…...
速盾:CDN是否支持屏蔽IP?
CDN(内容分发网络)是一种用于提高网站性能和可靠性的技术,通过将内容分发到距离终端用户更近的节点,减少了数据传输的延迟并提高了用户体验。在CDN中,屏蔽IP是一项重要的功能,可以帮助网站屏蔽无效或恶意请…...

机器学习—学习曲线
学习曲线是帮助理解学习算法如何工作的一种方法,作为它所拥有的经验的函数。 绘制一个符合二阶模型的学习曲线,多项式或二次函数,画出交叉验证错误Jcv,以及Jtrain训练错误,所以在这个曲线中,横轴将是Mtrai…...

19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

K8S认证|CKS题库+答案| 11. AppArmor
目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作: 1)、切换集群 2)、切换节点 3)、切换到 apparmor 的目录 4)、执行 apparmor 策略模块 5)、修改 pod 文件 6)、…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
站群服务器的应用场景都有哪些?
站群服务器主要是为了多个网站的托管和管理所设计的,可以通过集中管理和高效资源的分配,来支持多个独立的网站同时运行,让每一个网站都可以分配到独立的IP地址,避免出现IP关联的风险,用户还可以通过控制面板进行管理功…...

Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志,定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...

Element-Plus:popconfirm与tooltip一起使用不生效?
你们好,我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip,产品要求是两个需要结合一起使用,也就是鼠标悬浮上去有提示文字,并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...