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;"|…

android 实现答题功能

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

正排索引和倒排索引

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

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

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

卷积神经网络各层介绍

目录 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(){-----首先设置为帧…

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…

UE5 第一人称射击项目学习(完结)

这个项目几乎完结了。 也算我上手的第一个纯蓝图小项目。 现在只剩下缝缝补补了。 之前把子弹设计为蓝图&#xff0c;这里要引入C的面向对象思想&#xff0c;建立成员函数。 首先双击打开子弹的蓝图 这边就可以构造成员函数 写一个print your name 在这里生成成员函数后&am…

三相正弦交流电的相序:揭秘正相序与反相序的奥秘

在电力系统中&#xff0c;三相正弦交流电的应用无处不在&#xff0c;从家庭用电到大型工业设备&#xff0c;都离不开它的稳定供电。然而&#xff0c;在三相交流电中&#xff0c;有一个概念常常让初学者感到困惑&#xff0c;那就是“相序”。今天&#xff0c;我们就来深入探讨一…

力扣面试题 - 24 插入

题目&#xff1a; 给定两个整型数字 N 与 M&#xff0c;以及表示比特位置的 i 与 j&#xff08;i < j&#xff0c;且从 0 位开始计算&#xff09;。 编写一种方法&#xff0c;使 M 对应的二进制数字插入 N 对应的二进制数字的第 i ~ j 位区域&#xff0c;不足之处用 0 补齐…

华为云容器监控平台

首先搜索CCE,点击云容器引擎CCE 有不同的测试&#xff0c;生产&#xff0c;正式环境 工作负载--直接查询服务名看监控 数据库都是走的一个 Redis的查看

Spring Cloud Stream实现数据流处理

1.什么是Spring Cloud Stream&#xff1f; 我看很多回答都是“为了屏蔽消息队列的差异&#xff0c;使我们在使用消息队列的时候能够用统一的一套API&#xff0c;无需关心具体的消息队列实现”。 这样理解是有些不全面的&#xff0c;Spring Cloud Stream的核心是Stream&#xf…

Notepad++--在开头快速添加行号

原文网址&#xff1a;Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Notepad怎样在开头快速添加行号。 需求 原文件 想要的效果 方法 1.添加点号 Alt鼠标左键&#xff0c;从首行选中首列下拉&#xff0c;选中需要添加序号的所有行的首列&#xff…