当前位置: 首页 > news >正文

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 Propicon-default.png?t=O83Ahttps://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的注意,其他注意事项icon-default.png?t=O83Ahttps://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-itemicon-default.png?t=O83Ahttps://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-areaicon-default.png?t=O83Ahttps://zh.uniapp.dcloud.io/component/movable-area.htmlmovable-view官方文档参考:

movable-view | uni-app官网uni-app,uniCloud,serverless,movable-viewicon-default.png?t=O83Ahttps://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,示例icon-default.png?t=O83Ahttps://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:"我是&lt;text&gt;&nbsp;    组件"

            }

        }

    }

</script>

<style scoped>

</style>

:decode="true" 表示可将文本中的特殊字符解码成原始文本。

rich-text组件

rich-text组件支持部分HTML节点及属性。官方文档参考:

rich-text | uni-app官网uni-app,uniCloud,serverless,rich-texticon-default.png?t=O83Ahttps://zh.uniapp.dcloud.io/component/rich-text.html     rich-text的具体使用会比较复杂。其中nodes属性可绑定type为text的数组和type为node 数组。这里暂不做详细说明。大家可网上找下详细的示例。

相关文章:

uni-app快速入门(八)--常用内置组件(上)

uni-app提供了一套基础组件&#xff0c;类似HTML里的标签元素&#xff0c;不推荐在uni-app中使用使用div等HTML标签。在uni-app中&#xff0c;对应<div>的标签是view&#xff0c;对应<span>的是text&#xff0c;对应<a>的是navigator&#xff0c;常用uni-app…...

基于Amazon Bedrock:一站式多模态数据处理新体验

目录 引言 关于Amazon Bedrock 基础模型体验 1、进入环境 2、发现模型及快速体验 3、打开 Amazon Bedrock 控制台 4、通过 Playgrounds 体验模型 &#xff08;1&#xff09;文本生成 &#xff08;2&#xff09;图片生成 关于资源清理 结束语 引言 在云计算和人工智能…...

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 中一个非常重要的概念&#xff0c;它用于唯一标识 widget 树中的特定 widget&#xff0c;并提供对该 widget 的访问。这在需要跨越 widget 树边界进行交互或在 widget 树重建时保持状态时尤其有用。 GlobalKey 的作用 唯一标…...

vue3 路由守卫

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

【MATLAB源码-第218期】基于matlab的北方苍鹰优化算法(NGO)无人机三维路径规划,输出做短路径图和适应度曲线.

操作环境&#xff1a; MATLAB 2022a 1、算法描述 北方苍鹰优化算法&#xff08;Northern Goshawk Optimization&#xff0c;简称NGO&#xff09;是一种新兴的智能优化算法&#xff0c;灵感来源于北方苍鹰的捕猎行为。北方苍鹰是一种敏捷且高效的猛禽&#xff0c;广泛分布于北…...

如何控制自己玩手机的时间?两台苹果手机帮助自律

对一些人来说&#xff0c;被智能手机“绑架”是一件心甘情愿的事&#xff0c;和它相处的一天中&#xff0c;不必面对现实的压力&#xff0c;它就像个“舒适区”。这是因为在使用手机的过程中&#xff0c;应用程序&#xff08;尤其是游戏和社交媒体应用&#xff09;会不断刺激大…...

【java-Neo4j 5开发入门篇】-最新Java开发Neo4j

系列文章目录 前言 上一篇文章讲解了Neo4j的基本使用&#xff0c;本篇文章对Java操作Neo4j进行入门级别的阐述&#xff0c;方便读者快速上手对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地址&#xff0c;与服务器建立连接 用户在浏览器地址栏输入一个URL 浏览器开始执行以下三步操作操作&#xff1a;url解析、DNS查询、TCP连接 第一步&#xff1a;URL解析 什么是URL&#xff1f; URL(Uniform Resource Locator&#xff0c;统一资源定位符)是互联网…...

elasticsearch的倒排索引是什么?

大家好&#xff0c;我是锋哥。今天分享关于【elasticsearch的倒排索引是什么&#xff1f;】面试题。希望对大家有帮助&#xff1b; elasticsearch的倒排索引是什么&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 倒排索引&#xff08;Inverted Index&a…...

Ubuntu VNC Session启动chromium和firefox报错

问题描述 VNC客户端连接到Ubuntu Server后&#xff0c;启动chromium和firefox时报错&#xff1a; $ 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添加互联设备参考 效果 首先是连接情况&#xff0c;双端都连接上自建的 Headscale&#xff0c; 手机使用移动流量&#xff0c;测试一下 ping 值 再试试进入游戏 可…...

C++ 编程基础(8)模版 | 8.2、函数模版

文章目录 一、函数模版1、声明与定义2、模版参数3、模板的实例化3.1、隐式实例化3.2、显示实例化 4、模版的特化5、注意事项6、总结 前言&#xff1a; C 函数模板是一种强大的特性&#xff0c;它允许程序员编写与类型无关的代码。通过使用模板&#xff0c;函数或类可以处理不同…...

Android Studio音频视频播放器课程设计

这个项目适合刚刚学习Android studio的初学者&#xff0c;实现音视频的基本播放功能&#xff0c;各项功能的页面都做的比较简单&#xff0c;特别适用于初学者&#xff0c;其特点在于本项目抛开了各种花里胡哨的制作&#xff0c;以最接近初学者的样式画面呈现&#xff0c;完全不…...

速盾:CDN是否支持屏蔽IP?

CDN&#xff08;内容分发网络&#xff09;是一种用于提高网站性能和可靠性的技术&#xff0c;通过将内容分发到距离终端用户更近的节点&#xff0c;减少了数据传输的延迟并提高了用户体验。在CDN中&#xff0c;屏蔽IP是一项重要的功能&#xff0c;可以帮助网站屏蔽无效或恶意请…...

机器学习—学习曲线

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

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

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

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

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&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

Java 与 MySQL 性能优化:MySQL 慢 SQL 诊断与分析方法详解

文章目录 一、开启慢查询日志&#xff0c;定位耗时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一起使用不生效?

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