uniapp学习

简单案例

hover-class按下改变样式 ,hover-stay-time展示多久，以毫秒计算

<script setup>
	
</script>

<template>
<view class="layout">
	<view class="box1">1</view>
	<view class="box2">2</view>
	<view class="box3" hover-class="boxHover">3</view><!--hover-class按下改变样式  -->
	
</view>
</template>

<style lang="scss">
	.layout{
		border: 1px solid red;
		.box2{
			border: 1px solid beige;
		}
		.box1{
			border: 1px solid gray;
		}
	}
	.boxHover{
		background-color: #5555ff;
	}
</style>

text

<script setup>
	
</script>

<template>
<view>
	<!--selectable文本是否可选，space空格  -->
	<text selectable="true" space="emsp">aaaaaa aaaaaaaa</text>
</view>

</template>

<style lang="scss">

</style>

sroll-view 可滚动视图区域

<script setup>
	
</script>

<template>
<view>
	<scroll-view scroll-y="true" class="scrollview">
		<view>1</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
		<view>2</view>
	</scroll-view>

</view>

</template>

<style lang="scss">
	.scrollview{
		width: 80%;
		height: 100px;
		border: 1px solid red;
	}

</style>

swiper 轮播图

<script setup>
	
</script>

<template>
<view>
	<!-- indicator-dots 是否显示面板指示点 -->
	<!-- indicator-color 指示点颜色(未加载的那几个) -->
	<!-- indicator-active-color 	当前选中的指示点颜色 -->
	<!-- circular是否采用衔接滑动，即播放到末尾后重新回到开头 -->
	<!-- autoplay 是否自动切换 5s-->
	<!-- interval 自动切换时长 -->
	<!-- vertical 竖向 -->
	<swiper indicator-dots indicator-color= #007aff indicator-active-color= #dd524d 
	circular autoplay interval="2000" vertical>
		<swiper-item>1</swiper-item>
		<swiper-item>2</swiper-item>
		<swiper-item>3</swiper-item>
		<swiper-item>4</swiper-item>
	</swiper>

</view>

</template>

<style lang="scss">
	swiper{
		swiper-item{
			width: 100%;
			height: 100%;
			background-color: olive;
		
		}
		// 选择最后一个元素：nth-last-child(n)
		// 选择奇数元素：nth-child(2n+1)
		// 选择所有偶数索引的子元素
		swiper-item:nth-child(2n){
			background-color:orange;
			}
	}


</style>

image图片

<script setup>
	
</script>

<template>
<view>
	<image src="../../static/logo.png" mode="aspectFill" class="image"></image>

</view>

</template>

<style lang="scss">


</style>

 
navigator跳转页面

 

<script setup>
	
</script>

<template>
<view >
<navigator url="/pages/demo/demo" open-type="reLaunch">
	<image src="../../static/logo.png"></image>
</navigator>

</view>

</template>

<style lang="scss">


</style>

 button

 

<script setup>
	
</script>

<template>
<view >
<!-- 	size 按钮的大小		
	type 按钮的样式类型		
	plain 按钮是否镂空，背景色透明		
	disabled 是否禁用		
	loading 名称前是否带 loading 图标 -->
<button size="default" type="primary"  >登录</button>
</view>

</template>

<style lang="scss">


</style>

input