Java教程

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

本文主要是介绍【UniApp】-uni-app-内置组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

前言

  • 好,经过上个章节的介绍完毕之后,了解了一下 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>
  • 显示效果

注意点:

  1. 默认情况下 UniApp 的内置组件已经做好了适配,运行在不同平台上会自动转换成对应平台的组件
  2. 所以虽然在 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>
  • 显示效果

  • 可以看到已经显示出来了,这就是 UniApp 的内置组件,非常的简单,大家可以自行去查看官方文档,然后将示例代码拷贝到你们的项目中,然后改改就好了
  • 好了,学习方式其实很简单,就和饿了么和Vue,ant design 一样,直接去查看官方文档,这篇文章就到这里

最后

大家好我是 BNTang, 一个热爱分享的技术的开发者,如果大家觉得我的文章对你有帮助的话,可以关注我的公众号 JavaBoyL,我会在公众号中分享一些IT技术和一些个人的见解,谢谢大家的支持。

这篇关于【UniApp】-uni-app-内置组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!