uni-app入门教程之掌握组件的基本使用

推荐（免费）：uni-app开发教程

文章目录

• 前言
• 一、基础组件
• • 1.scroll-view
  • 2.swiper
  • 3.text
  • 4.rich-text
  • 5.process
• 二、表单组件
• • 1.button
  • 2.checkbox
  • 3.input
  • 4.label
  • 5.picker
  • 6.radio
  • 7.slider
  • 8.switch
  • 9.textarea
  • 10.form
• 三、导航组件和页面传参
• • 1.navigator
  • 2.参数传递
• 四、媒体组件
• • 1.audio
  • 2.image
  • 3.video
• 总结

前言

本文主要介绍了uni-app中的组件，包括四大类：基础组件（scroll-view、swiper、text等）、表单组件（button、checkbox、input等）、导航组件navigator和页面传参、媒体组件（audio、image和video等），详细说明了这些组件的常用属性和方法，并进行使用举例和演示。

一、基础组件

组件是视图层的基本组成单元，一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。
所有组件与属性名都是小写，单词之间以连字符-连接，根节点为<template>，其下只能有一个根组件。

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
常见的基础组件如下：

view是最基础的视图容器，类似于传统html中的p，用于包裹各种元素内容。

1.scroll-view

可滚动视图区域，用于区域滚动。
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

常见的属性和含义如下：

常见的事件和含义如下：

hello uniapp项目中，index.vue如下：

<template>
	<view>
		<scroll-view class="scv" scroll-x="true">
			<view>1</view>
			<view>2</view>
			<view>3</view>
			<view>4</view>
			<view>5</view>
			<view>6</view>
		</scroll-view>
	</view></template><script>
	var _self;
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			_self = this
		},
		onShow() {
		},
		onHide() {
		},
		methods: {
		}
	}</script><style>
	scroll-view {
		display: flex;
	}
	.scv {
		width: 90%;
		margin: 0 auto;
		background: #F0AD4E;
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	.scv view {
		width: 50%;
		height: 100px;
		background: #007AFF;
		display: inline-block;
	}</style>

显示：

显然，此时可以横向滚动。

2.swiper

滑块视图容器，一般用于左右滑动或上下滑动，比如banner轮播图。

说明：
滑动切换和滚动之间是有区别的，滑动切换是一屏一屏的切换，swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间，而滚动是允许停留在2个滚动区域之间的。

常见属性和含义如下：

常见事件如下：