【UniApp】-uni-app-內建元件

BNTang發表於2023-12-09
APP元件

前言

  • 好，經過上個章節的介紹完畢之後，瞭解了一下 uni-app-全域性資料和區域性資料
  • 那麼瞭解完了uni-app-全域性資料和區域性資料之後，這篇文章來給大家介紹一下 UniApp 中內建元件
  • 首先不管三七二十一，先來新建一個專案

搭建演示環境

建立一個全新的專案：

然後在配置一下，微信小程式的 AppId，直接去之前的專案中複製一下即可，找到之前專案的 manifest.json 檔案，然後選擇微信小程式配置，複製一下即可：

  • 經過如上的這麼一頓操作之後，就可以搭建完畢執行環境，與編碼環境

步入正題

  • 可以看到在左側的選單中，有非常多的分類不同型別對應不同場景的元件
  • 這些元件大家都不需要記，就和之前 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技術和一些個人的見解，謝謝大家的支援。

相關文章