uni-app02

划水哗哗哗~~~~~~~~~~~~

一.uni-app常用标签

二. 标签用法

1.view

类似于HTML中的div标签通常用于布局和包裹其他标签

属性说明

2.scroll-view

在指定的区域设置一块可以左右滚动的区域,通常用于下拉刷新和商品主体部分

属性说明

代码示例

<template>
	<scroll-view class="scrollview" scroll-y="true">
		<view class="box">0</view>
		<view class="box">1</view>
		<view class="box">2</view>
		<view class="box">3</view>
		<view class="box">4</view>
		<view class="box">5</view>
		<view class="box">6</view>
		<view class="box">7</view>
		<view class="box">8</view>
		<view class="box">9</view>
	</scroll-view>
</template>

<script>

</script>

<style>
	.scrollview {
		height: 100px;
		border: 1px solid red;
		white-space: nowrap;
	}

	.box {
		widows: 100px;
		height: 100px;
		background-color: aqua;

	}
</style>

3.swiper

用于制作轮播图

属性说明

代码示例

<template>
<swiper class="swiper" indicator-dots autoplay interval="1000">
	<swiper-item class="swiperview">111</swiper-item>
	<swiper-item class="swiperview">222</swiper-item>
	<swiper-item class="swiperview">333</swiper-item>
	<swiper-item class="swiperview">444</swiper-item>
	</swiper>
</template>

<script>

</script>

<style>
	.swiper {
		height: 100px;
		border: 1px solid red;
		white-space: nowrap;
	}

	.swiperview {
		widows: 100px;
		height: 100px;
		background-color: aqua;

	}
</style>

4.image

相对于HMTL中的img,用于展示图片

属性说明

代码示例

<template>
	<scroll-view class="scrollview" scroll-y="true">
		<image src="../../static/1.jpeg" class="imger"></image>
		<image src="../../static/2.jpeg" class="imger"></image>
		<image src="../../static/3.png" class="imger"></image>
		<image src="../../static/4.jpg" class="imger"></image>
		<image src="../../static/5.png" class="imger"></image>
	</scroll-view>
</template>

<script>

</script>

<style>
	.scrollview {
		height: 280px;
		border: 1px solid red;
	}
</style>

5.text

属性说明

space

默认情况无论添加多少个空格,都会编译成一个.通过这个属性可以添加多个

6.navigator

属性说明

7.button

属性说明

8.

9.