【UniApp】-uni-app-内置组件

技术分享 2年前 (2023-12-10) 0 999+

关注

前言

好，经过上个章节的介绍完毕之后，了解了一下 uni-app-全局数据和局部数据
那么了解完了uni-app-全局数据和局部数据之后，这篇文章来给大家介绍一下 UniApp 中内置组件
首先不管三七二十一，先来新建一个项目

搭建演示环境

创建一个全新的项目：

然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可：

经过如上的这么一顿操作之后，就可以搭建完毕运行环境，与编码环境

步入正题

好，我们的基本内容都已经准备完毕，我们来看 UniApp 的内置组件
打开官方文档：组件使用的入门教程 | uni-app官网 (dcloud.net.cn)
在官方文档当中有一个组件，点击组件按钮进入组件页面

可以看到在左侧的菜单中，有非常多的分类不同类型对应不同场景的组件
这些组件大家都不需要记，就和之前 Vue, 微信小程序, 饿了么UI 一样，用到谁，直接回到文档中查询一下即可
看一下他的文档，文档里面一般都会有示例，直接将示例程序拷贝到你们的项目中看一下改改就好，好了我就不废话了，直接来看看怎么使用

view

视图容器
它类似于传统 html 中的 div，用于包裹各种元素内容

<template> 	<view> 		<view>我是view组件</view> 	</view> </template>  <script> 	// index.vue 	export default {} </script>

显示效果

text

文本组件，用于包裹文本内容

<template> 	<view> 		<text>我是text组件</text> 	</view> </template>  <script> 	// index.vue 	export default {} </script>

显示效果

button

按钮

<template> 	<view> 		<button type="default">default button</button> 		<button type="primary">primary button</button> 		<button type="warn">warn button</button> 	</view> </template>  <script> 	// index.vue 	export default {} </script>

显示效果

注意点：

默认情况下 UniApp 的内置组件已经做好了适配，运行在不同平台上会自动转换成对应平台的组件
所以虽然在 UniApp 中也可以直接编写 HTML 代码，使用 HTML 元素，但是 不推荐，因为 HTML 元素 UniApp 是没有做适配的，可能在不同平台上运行会出现未知问题

所以你要用就用 UniApp 提供的组件，而不要去使用 HTML 元素

来看一下注意点的第一点，运行在不同平台上会自动转换成对应平台的组件，在演示 button 组件的时候我们编写了 <button type="primary">primary button</button> 这么一行代码，但是在 H5 运行显示的是蓝色

但是呢运行在微信小程序当中显示的是绿色，这就是 UniApp 自动转换成对应平台的组件

运行在手机上显示的是蓝色

image

图片组件，用于显示图片

<template> 	<view> 		<!-- 		图片素材大家自行去替换自己的 		--> 		<!--  		 相对路径 		 --> 		<image src="../../static/01.jpg"/> 		<!--  		 绝对路径 		 --> 		<image src="@/static/01.jpg"/> 	</view> </template>  <script> 	// index.vue 	export default {} </script>

显示效果

scroll-view

可滚动视图区域。用于区域滚动，常用于聊天记录，商品列表等
需注意在webview渲染的页面中，区域滚动的性能不及页面滚动

<template> 	<view> 		<scroll-view class="scrollViewByThis" scroll-y="true"> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 			<view>A</view> 		</scroll-view> 	</view> </template>  <script> 	// index.vue 	export default {} </script> <style lang="scss" scoped> 	.scrollViewByThis { 		width: 100%; 		height: 150rpx; 		border: 1px solid red; 	} </style>

显示效果

其实非常的简单，就是查看官方文档，然后将示例代码拷贝到你们的项目中，然后改改就好了

swiper

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

注意点：

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换
swiper 下的每个 swiper-item 是一个滑动切换区域，不能停留在 2 个滑动区域之间

<template> 	<view> 		<swiper> 			<swiper-item> 				<view>A</view> 			</swiper-item> 			<swiper-item> 				<view>B</view> 			</swiper-item> 			<swiper-item> 				<view>C</view> 			</swiper-item> 		</swiper> 	</view> </template>  <script> 	// index.vue 	export default {} </script>

显示效果

这个时候你如果想要中间的面板指示点，直接去查看官方文档即可
假如我想要显示面板指示点，我去查阅官方文档，发现是通过 indicator-dots 属性来控制的，给 swiper 组件添加 indicator-dots 属性即可

<template> 	<view> 		<swiper indicator-dots="true"> 			<swiper-item> 				<view>A</view> 			</swiper-item> 			<swiper-item> 				<view>B</view> 			</swiper-item> 			<swiper-item> 				<view>C</view> 			</swiper-item> 		</swiper> 	</view> </template>  <script> 	// index.vue 	export default {} </script>