1.视图容器
view
说明:view组件就类似于我没HTML中的div标签,用来布局和包裹各种标签
常用属性
hover-class:默认值是none,它是按下去的样式类,也就是我们所谓的点击时的效果
hover-stop-propagation(冒泡):默认值false,他是用来阻止祖先节点出现点击时的样式
注意:这个属性再App、H5、支付宝小程序、百度小程序不支持(来自uni-app官方文档说明),但是试了一下H5的可以支持,不知道其他的能不能支持
hover-start-time:默认值50,单位毫秒,按下的后多久出现按下的样式
hover-stay-time:默认值400,单位毫秒,指松开后多久消失按下的样式
例如:
<template>
<view class="content">
<view class="box" hover-class="hoverBox">aa
<view class="innerBox" hover-class="hoverInnerBox" hover-stop-propagation hover-start-time="1000" hover-stay-time="2000">bb</view>
<!--hover-start-time 设置了点击bb容器后1秒显示样式-->
<!--hover-stay-time 设置了松开点击后2秒消失样式L-->
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
//aa容器样式
.box{
width: 200px;
height: 200px;
background: pink;
//bb容器样式
.innerBox{
width: 100px;
height: 100px;
background: orange;
}
//点击bb容器的样式
.hoverInnerBox{
background: blue;
}
}
//点击aa容器的样式
.hoverBox{
background: green;
}
</style>
scroll-view
说明:可滚动视图区域,用于区域滚动
常用属性
scroll-x:允许视图内横向滚动
scroll-top:设置横向滚动条出现的位置
scroll-y:允许视图内纵向滚动
scroll-left:设置纵向滚动条出现位置
upper-threshold:距顶部/左边多远时(单位px),触发 scrolltoupper 事件,默认值:50
lower-threshold:距底部/右边多远时(单位px),触发 scrolltolower 事件,默认值:50
更多属性见官方文档:scroll-view | uni-app官网
一个简单的示例:
<template>
<!-- 纵向滚动 -->
<text>纵向滚动</text>
<scroll-view scroll-y="true" class="yScrollView">
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
<view class="yBox">子元素</view>
</scroll-view>
<view>=====================</view>
<!-- 横向滚动 -->
<text>横向滚动</text>
<scroll-view scroll-X="true" class="xScrollView">
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
<view class="xBox">子元素</view>
</scroll-view>
</template>
<script>
</script>
<style lang="scss">
//纵向滚动
.yScrollView{
width: 70%;
height: 220px;
border: 1px solid red;
.yBox{
width: 100px;
height: 100px;
background: darkgray;
margin: 5px;
}
}
/* 横向滚动的关键是子元素.xBox要设置:display: inline-block 把这个子元素变成行内块,在一行显示,
并在.xScrollView设置white-space: nowrap 不自动换行 */
.xScrollView{
width: 70%;
height: 220px;
border: 1px solid blue;
white-space: nowrap; //宽度不够的时候不自动换行
.xBox{
width: 100px;
height: 100px;
background: orange;
margin: 5px;
display: inline-block; //把子元素设置成行内块元素
}
}
</style>
swiper
说明:滑块视图容器,一般用于左右滑动或上下滑动,比如轮播图
常用属性
indicator-dots:是否显示面板指示点,默认值:false
indicator-color:指示点颜色,默认值:rgba(0, 0, 0, .3)
indicator-active-color:选中指示点显示的颜色,默认值:#000000
autoplay:是否自动切换轮播图图片,默认值:false
interval:指定自动切换图片的间隔时间,默认值:5000
vertical:指定这个滑块视图为纵向滑动(上下滑动),默认值:false
更多详细的swiper属性见官方文档:swiper | uni-app官网
一个简单的示例:
<template>
<!--
indicator-dots:显示面板指示点
indicator-color:设置指示点的颜色
indicator-active-color:设置选中的指示点颜色
autoplay:设置指示点自动切换,默认值:5000毫秒=5秒
interval:设置自动切换的间隔时长,单位是:ms(毫秒)
circular:指的是如果在最后一个轮播图的时候是否跳转到第一个轮播图
-->
<text>横向轮播图</text>
<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" autoplay interval="2500" circular>
<swiper-item>我是第一张图</swiper-item>
<swiper-item>我是第二张图</swiper-item>
<swiper-item>我是第三张图</swiper-item>
<swiper-item>我是第四张图</swiper-item>
</swiper>
<view>======================</view>
<text>纵向轮播图</text>
<swiper indicator-dots indicator-color="rgba(255,255,255,0.3)" indicator-active-color="#fff" autoplay interval="2500" circular vertical>
<swiper-item>我是第一张图</swiper-item>
<swiper-item>我是第二张图</swiper-item>
<swiper-item>我是第三张图</swiper-item>
<swiper-item>我是第四张图</swiper-item>
</swiper>
</template>
<script>
</script>
<style lang="scss">
swiper{
width: 99vw;//vw单位是屏幕占比
height: 200px;//px像素单位
border: 2px solid green;
swiper-item{
//设置滑块容器的子元素样式
width: 100%;
height: 100%;
background: pink;
}
}
/* 设置滑块容器偶数子元素的样式,n表示一个计数器从0开始计算--2n就表示偶数 */
swiper-item:nth-child(2n){
background: bisque;
}
</style>
视频演示:
swiper轮播图示例
2.基础内容
text
说明:文本组件,用于包裹文本内容
常用属性
selectable:指这个文本是否可以选中,默认值false
user-select:指这个文本是否可以选中,默认值false,用于微信小程序
space:指的是在text组件添加了这个属性的话,文本中的多个空格在页面上不在是显示一个空格,而是显示连续的空格
space值
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
3.媒体组件
image
图片格式说明:uvue原生渲染下支持:.bmp .gif .ico .jpg .png .webp .heic(Android10+支持)
常用属性
src:图片资源地址
mode:图片裁剪、缩放的模式,默认值:scaleToFill
draggable:是否能够拖动图片,默认值:true
mode有效属性
缩放模式
scaleToFill:不保持纵横比缩放图片,对图片设置什么宽高就是什么宽高
aspectFit:保持纵横比缩放图片,可以完整的显示整张图片
aspectFill:保持纵横比缩放图片,如果对图片仅设置了高的话,这个属性会对图片进行上下裁剪,显示原始图片比较中间的一部分,单独设置宽的话,就会对左右进行裁剪
更多详细的image属性见官方文档:image | uni-app官网
4.表单组件
button
说明:按钮
常用属性
size:按钮的大小,默认值:default(宽度会占满一行)
type:按钮的样式类型,默认值:default
plain:指按钮内部填空为透明色,即镂空状态,默认值:false
disabled:是否禁用按钮,禁用之后不能在进行点击,默认值:false
loading:在按钮文字前面显示一个加载图标,默认值:false
form-type:指点击按钮后触发butto组件的事件
size有效值
default:默认大小,占一整行
mini:小尺寸
也可以通过css来修改大小
form-type 有效值
submit:提交表单
reset:重置表单 (如果这个button包含在from表单里面的话,点击它就会将其他input框的内容置空)
更多详细的button属性见官方文档:button | uni-app官网
input
说明:单行输入框
常用属性
value:程序一运行显示的初始值
type:input输入框的类型值,默认值:text
password:指这个input是否是密码类型,将输入到input输入框的值一圆点代替,保证输入密码时的安全,并且在尝试复制这个值的时候是复制不到的,默认值:false
placeholder:输入框为空时一般用于显示一些提示信息,如:请输入xxx
disabled:是否被禁用,默认值:false
maxlength:输入框的最大限制输入长度,默认值:140,设置为-1时为不限制
focus:获取焦点,如果一个input设置了这个属性时,程序运行后光标就会在此input上
更多详细的input属性见官方文档:input | uni-app官网
type有效值
text:文本输入键盘
number:数字输入键盘
idcard:身份证输入键盘
digit:带小数点的数字键盘
tel:电话输入键盘
safe-password:密码安全输入键盘
nickname:昵称输入键盘
注意:在开发时有些type值如果想要看效果的话要到手机上才能看到效果,具体的操作是:
5.路由与页面跳转
navigator
说明:页面跳转,和HTML中的a标签类似,但是只能在本地页面跳转,并且此页面要包含在pages.json中
常用属性
url:此应用内跳转链接,值是相对页面路径或绝对页面路径,但是不能添加.vue后缀
open-type:跳转方式,默认值:navigate(加上这个属性后,点击navigator跳转到应用内的另一个页面时左上角会有一个返回上一个页面的按钮,也就是说上一个页面没有被销毁)
更多详细的navigator属性见官方文档:navigator | uni-app官网(其他属性涉及的方面太广,这里不多介绍,可以自行去了解)
open-type 有效值
注意:这些有效值对应的uni功能是API功能
navigate:对应 uni.navigateTo 的功能--保留当前页面跳转到应用内的某个页面,可以通过uni.navigateBack回到原来的页面
redirect:对应 uni.redirectTo 的功能--关闭当前页面,跳转到应用内某个页面(重定向)
switchTab:对应 uni.switchTab 的功能--跳转到 tabBar页面,并关闭其他所有非 tabBar页面(tabBar页面指的是底部导航栏包含的页面)
reLaunch:对应 uni.reLaunch 的功能--关闭其他页面,打开一个新的应用内的页面
navigateBack:对应 uni.navigateBack 的功能--关闭当前页面,返回上一页面或多级页面
exit:退出小程序,target="miniProgram"时生效
更多详细的API的介绍和属性见官方文档:uni.navigateTo(OBJECT) | uni-app官网
更多常用组件介绍更新中...尽情期待!!——最近最后一次更新时间:2024-08-22
声明:本章知识点均来自官方文档即自己的一些实践见解