uni-app常用组件的介绍

Waitfor_Me

已于 2024-08-22 11:28:41 修改

阅读量572

点赞数 26

文章标签： uni-app 前端

于 2024-08-21 21:29:54 首次发布

本文链接：https://blog.csdn.net/Waitfor_Me/article/details/141370069

版权

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轮播图示例