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 数组。这里暂不做详细说明。大家可网上找下详细的示例。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/886988.shtml

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

相关文章

早期超大规模语言模型的尝试——BLOOM模型论文解读,附使用MindSpore和MindNLP的模型和实验复现

背景 预训练语言模型已经成为了现代自然语言处理pipeline中的基石&#xff0c;因为其在少量的标注数据上产生更好的结果。随着ELMo、ULMFiT、GPT和BERT的开发&#xff0c;使用预训练模型在下游任务上微调的范式被广泛使用。随后发现预训练语言模型在没有任何额外训练的情况下任…

【团购核销】抖音生活服务商家应用快速接入②——商家授权

文章目录 一、前言二、授权流程三、授权Url3.1 Url参数表3.2 授权能力表3.3 源码示例 四、授权回调4.1 添加授权回调接口4.2 授权回调接口源码示例 五、实际操作演示六、参考 一、前言 目的&#xff1a;将抖音团购核销的功能集成到我们自己开发的App和小程序中 【团购核销】抖音…

解决 Android 单元测试 No tests found for given includes:

问题 报错&#xff1a; Execution failed for task :testDebugUnitTest. > No tests found for given includes: 解决方案 1、一开始以为是没有给测试类加public修饰 2、然后替换 Test 注解的包可以解决&#xff0c;将 org.junit.jupiter.api.Test 修改为 org.junit.Tes…

gbase8s之mysql的show命令实现

第一步&#xff1a;生成show.sh脚本 cat /home/gbase/show.sh #!/bin/bash #作者&#xff1a;乡村野中医 #创作时间2024-11-21 #脚本名称show.sh function show(){ #echo $# if [ "xdatabases" x$1 ] then echo "select name from sysdatabases;"|…

高级java每日一道面试题-2024年11月19日-基本篇-获取一个类Class对象的方式有哪些?

如果有遗漏,评论区告诉我进行补充 面试官: 获取一个类Class对象的方式有哪些? 我回答: 在 Java 中&#xff0c;获取一个类的 Class 对象有多种方式。这些方式各有优缺点&#xff0c;适用于不同的场景。以下是常见的几种方法及其详细解释&#xff1a; 1. 使用 new 关键字实…

android 实现答题功能

一、效果 二、实现思路 1、界面实现 实现起来其实不难&#xff0c;首先我们可以看到&#xff0c;界面是由答题进度、题目、选项ABCD组成&#xff0c;现在就是要考虑实现方式&#xff0c;答题进度可以使用Textviewprogressbar实现&#xff0c;题目直接使用Textview&#xff0c;…

正排索引和倒排索引

一、简介 正排索引&#xff1a;一个未经处理的数据库中&#xff0c;一般是以文档ID作为索引&#xff0c;以文档内容作为记录。 倒排索引&#xff1a;Inverted index&#xff0c;指的是将单词或记录作为索引&#xff0c;将文档ID作为记录&#xff0c;这样便可以方便地通过单词或…

深入理解Java异常:检查型与非检查型异常的区别与实践

目录 一、Java异常的基本概念 二、检查型异常与非检查型异常的区别 1. 检查型异常&#xff08;Checked Exception&#xff09; 2. 非检查型异常&#xff08;Unchecked Exception&#xff09; 三、检查型与非检查型异常的代码示例 1. 检查型异常示例 2. 非检查型异常示例…

C++初始化成员列表

1.介绍&#xff1a; 初始化成员列表是 C 中的一种构造函数语法&#xff0c;允许在对象构造时直接初始化类的成员变量&#xff0c;而不是先默认初始化再赋值 2.用法&#xff1a; ClassName(参数列表) : 成员1(参数1), 成员2(参数2), ... {// 构造函数体 }&#xff08;1&#…

Django一分钟:django中收集关联对象关联数据的方法

场景&#xff1a;我有一个模型&#xff0c;被其它多个模型关联&#xff0c;我配置了CASCADE级联删除&#xff0c;我想要告知用户删除该实例之后&#xff0c;哪些关联数据将会被一同删除。 假设我们当前有这样一组模型&#xff1a; class Warehouse(models.Model):""…

统计班级中的说谎者(字节青训)

题目 班里有 N 个学生&#xff0c;第 i 个学生的分数是 A_i。当且仅当分数 < A_i 的学生数量多于分数比他高的数量时&#xff0c;第 i 个学生会说谎。求出有多少学生会说谎。 输入格式 输入 N 学生的成绩&#xff0c;包含 A_1, A_2, ..., A_N 输出格式 对于每组数据&am…

卷积神经网络各层介绍

目录 1 卷积层 2 BN层 3 激活层 3.1 ReLU&#xff08;Rectified Linear Unit&#xff09; 3.2 sigmoid 3.3 tanh&#xff08;双曲正切&#xff09; 3.4 Softmax 4 池化层 5 全连接层 6 模型例子 1 卷积层 卷积是使用一个卷积核&#xff08;滤波器&#xff09;对矩阵进…

【工控】线扫相机小结 第四篇

背景 这一片主要是对第三篇继续补充。话说上一篇讲到了两种模式的切换&#xff0c;上一篇还遗留了一个Bug&#xff0c;在这一篇里进行订正&#xff01; 代码回顾 /// <summary>/// 其实就是打开触发/// </summary>void SetLineSacanWorkMode(){-----首先设置为帧…

MySql面试题.运维面试题之五

《(全国)MySQL数据库DBA测试题-第1套》 卷面总分 题号 单选题 多选题 判断题 100 题分 42 40 18 得分 一、单选题(每题3分,共计42分;得分____) 1. 二进制rpm包安装的mysql数据库,默认的数据文件存放在如下哪个目录里? A、/usr/local/mysql B、/tmp/ C、/var/lib/my…

AI 大模型重塑软件开发的未来

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【软考】系统架构设计师-计算机系统基础(4):计算机网络

计算机网络功能&#xff1a;数据通信、资源共享、管理集中化、分布式处理、负载均衡 5G高峰速率&#xff1a;10Gbit/s 广域网&#xff08;因特网&#xff09;/城域网/局域网&#xff08;以太网&#xff09; 总线型&#xff1a;利用率低&#xff0c;易冲突&#xff0c;干扰大…

Ultiverse 和web3新玩法?AI和GameFi的结合是怎样

Gamef 和 AI 是我们这个周期十分看好两大赛道之一&#xff0c;(Gamef 拥有极强的破圈效应&#xff0c;引领 Web2 用户进军 Web3 最佳利器。AI是这个周期最热门赛道&#xff0c;无论 Web2的 OpenAl&#xff0c;还是 Web3&#xff0c;都成为话题热议焦点。那么结合 GamefiA1双叙事…

Matlab多输入单输出之倾斜手写数字识别

本文主要介绍使用matlab构建多输入单输出的网络架构&#xff0c;来实现倾斜的手写数字识别&#xff0c;使用concatenationLayer来拼接特征&#xff0c;实现网络输入多个特征。 1.加载训练数据 加载数据&#xff1a;手写数字的图像、真实数字标签和数字顺时针旋转的角度。 lo…

R | 统一栅格数据的坐标系、分辨率和行列号

各位同学&#xff0c;在做相关性等分析时&#xff0c;经常会遇到各栅格数据间的行列号不统一等问题&#xff0c;下面的代码能直接解决这类麻烦。以某个栅格数据的坐标系、分辨率和行列号为准&#xff0c;统一文件夹内所有栅格并输出到新的文件夹。 代码只需要更改输入输出和ti…

分布式缓存 + 数据存储 + 消息队列知识体系

文章目录 1. 分布式缓存的原理和技术2. 数据存储3. 数据的备份、恢复、迁移4. 项目案例分析5. 消息队列的原理和技术6. 消息队列的高级特性7. 项目案例分析 1. 分布式缓存的原理和技术 分布式缓存&#xff1a;分布式缓存是一种将数据存储在网络中的多个节点上的技术&#xff0c…