uni-app--》常用组件的相关介绍

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：uni-app

🚲座右铭：人生亦可燃烧，亦可腐败，我愿燃烧，耗尽所有光芒。

👀引言

        ⚓经过web前端的学习，相信大家对于前端开发有了一定深入的了解，今天我开设了uni-app专栏，主要想从移动端开发方向进一步发展，而对于我来说写移动端博文的第二站就是uni-app开发，希望看到我文章的朋友能对你有所帮助。

目录

uni-app组件概述

基础组件

视图容器

基础内容

表单组件

媒体组件

路由组件

扩展组件

---

uni-app组件概述

组件是视图层的基本组成单元，是一个单独且可复用的功能模块的封装，每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

在uni-app中，组件大致分为基础组件和扩展组件，如下：

基础组件

基础组件在uni-app框架中已经内置，无需将内置组件的文件导入项目，也无需注册内容内置组件，随时可以直接使用，比如<view>组件。

<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="bindDateChange">
	<view class="picker">
	  当前选择: {{date}}
	</view>
</picker>

基础组件主要分为十几大类，举例说明一下常用的基础组件，如下：

视图容器

所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。这里讲解重要且常见的组件。

scroll-view：可滚动视图区域，用于区域滚动。该组件属性很多，可自行去官网查看：

<template>
	<view class="scroll" scroll-x>
		<scroll-view class="group" scroll-x @touchmove.stop> <!-- 触摸屏幕滑动时，阻止冒泡事件-->
			<view class="item">
				111
			</view>
			<view class="item">
				111
			</view>
			<view class="item">
				111
			</view>
			<view class="item">
				111
			</view>
			<view class="item">
				111
			</view>
		</scroll-view>
	</view> 
</template>

<script>
	export default {
	}
</script>

<style lang="scss">
.scroll{
	border: 1px solid red;
	box-sizing: border-box;
	height: 220rpx;
	.group{
		white-space: nowrap;
		.item{
			width: 220rpx;
			height: 220rpx;
			background: rosybrown;
			display: inline-block;
			margin-right: 10rpx;
		}
	}
}
</style>

swiper：滑块视图容器，一般用于左右滑动或上下滑动，比如banner轮播图。相关的属性这里就不再赘述，可以自行查看官方文档，如下：

<template>
	<view class="scroll" scroll-x>
		<swiper circular indicator-dots indicator-color="#008c8c" autoplay interval="3000" duration="200" indicator-active-color="red">
			<swiper-item class="swiper-item">
				<image src="../../static/images/轮播图1.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="../../static/images/轮播图2.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="../../static/images/轮播图3.png" mode="aspectFill"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image src="../../static/images/轮播图4.png" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
	</view> 
</template>

<script>
	export default {
	}
</script>

<style lang="scss">
.swiper-item{
	width: 400rpx;
	image{
		width: 750rpx;
		height: 500rpx;
	}
}
</style>

基础内容

基础内容主要是对图表、文本、富文本、进度条细节方面的相关美化设置，如下：

icon图表：由于 icon 组件各端表现存在差异，可以通过使用 字体图标 的方式来弥补各端差异。

text文本组件：用于包裹文本内容。

这里注意一点，text相当于web里面的span标签，属于行内元素；而view相当于web里面的div标签，属于块级元素，独占一行。如下：

其它相关组件这里就不再赘述，后期项目用到的话再进行讲解。

表单组件

表单组件组件的话，基本上就是那web里面常见的标签，有几个uni-app自带的独有的表单组件，不过使用的方式都是一致的，如下：

举几个简单的例子，具体要搭配JS的组件这里就不再赘述了可自行参考官方文档，如下：

<template>
	<view>
		<!-- 按钮的使用 -->
		<button type="primary" size="mini" loading plain>按钮</button>
		<!-- 多选框的使用 -->
		<checkbox-group>
			<label>
				<checkbox value="cb" /><text>选中</text>
			</label>
			<label>
				<checkbox value="cb" /><text>未选中</text>
			</label>
		</checkbox-group>
	</view>
</template>

媒体组件

媒体组件主要用于设计图片、音频、视频等文件的内容，相关的组件使用如下：

image图片播放组件：相关属性如下，图片的使用的话可以参考官方文档，讲解的非常详细，这里博主就不再赘述了。

audio音频播放组件：相关属性如下，举几个简单的例子说明一下。

<template>
	<view>
		<view style="text-align: center;">
			<audio style="text-align: left" 
				:src="current.src" 
				:poster="current.poster" 
				:name="current.name" 
				:author="current.author" 
				:action="audioAction" 
				controls>
			</audio>
		</view>
	</view>
</template>


<script>
export default {
	data() {
		return {
			current: {
				poster: 'https://web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
				name: '哪里都是你',
				author: '队长',
				src: '../../static/哪里都是你.mp3',
			},
			audioAction: {
				method: 'pause'
			}
		}
	}
}

</script>

<style lang="scss">
video{
	width: 750rpx;
}
</style>

video视频播放组件：相关属性可以参考官网，这里不再赘述，如下：

<template>
	<view class="out">
		<video src="../../static/images/1.mp4" page-gesture></video>
	</view> 
</template>

<script>
	export default {
	}
</script>

<style lang="scss">
video{
	width: 750rpx;
}
</style>

路由组件

当页面要实现路由跳转时，可以采用  navigator，该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。相关属性具体如下：

路由跳转：uni-app有两种页面路由跳转方式:使用navigator组件跳转（标签式导航)、调用API跳转（编程式导航)框架以栈的形式管理当前所有页面，当发生路由切换的时候，页面栈的表现如下:

打开新页面：调用API：uni.navifateTo；使用组件：<navigator open-type="navigate"/>

页面重定向：调用API：uni.redirectTo

页面返回：调用API：uni.navigateBack；用户按左上角的返回按钮

Tab切换：调用API：uni.switchTab

重加载：调用API：uni.reLaunch

如果想设置跳转到页面之后不能返回，可以进行如下设置：

如果想传递参数的话，可以通过以下方式进行：

如果想通过 tabBar 来实现页面的路由导航，可以通过以下操作：

这里有一个注意点，当你开始使用tabBar进行路由导航的时候，普通的导航可能会失效，这里就需要你对 open-type 进行设置，如下：

当然内置组件还有很多，这里就不再一一赘述，可自行去官网查看。

扩展组件

扩展组件的内容类似于组件库的相关内容，这里就不再一一赘述，举几个简单的例子，如下：

举一个面包屑的例子，这里需要安装第三方插件，根据官网的提示安装第三方插件即可，然后把相关代码直接复制粘贴：

<template>
  <view class="container">
    <uni-card is-full :is-shadow="false">
      <text class="uni-h6"
        >面包屑导航显示当前页面的路径，快速返回之前的任意可跳转页面</text
      >
    </uni-card>
    <uni-section title="基础用法" type="line" padding>
      <uni-breadcrumb separator="/">
        <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
          {{route.name}}
        </uni-breadcrumb-item>
      </uni-breadcrumb>
    </uni-section>
    <uni-section title="自定义分隔符" type="line" padding>
      <uni-breadcrumb separator=">">
        <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
          {{route.name}}
        </uni-breadcrumb-item>
      </uni-breadcrumb>
    </uni-section>
  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
        routes: [
          {
            to: "/pages/index/index",
            name: "首页",
          },
          {
            to: "",
            name: "菜单 A",
          },
          {
            to: "",
            name: "菜单 B",
          },
        ],
      };
    },
  };
</script>

<style lang="scss"></style>

其它插件可自行查阅官方文档，这里就不再赘述。