碼上快樂

相關內容    簡體    繁體

uni-app內置基礎組件

本文轉載自   查看原文   2021-03-15 17:56   580    uni-app

官方文檔：

概述

https://uniapp.dcloud.io/vue-components?id=uni-app內置基礎組件

組件詳情

https://uniapp.dcloud.io/component/README

  • uni-app為開發者提供了一系列基礎組件，類似HTML里的基礎標簽元素。
  • 但uni-app的組件與HTML不同，而是與小程序相同，更適合手機端使用。
  • 雖然不推薦使用HTML標簽，但實際上如果開發者寫了div等標簽，在編譯到非H5平台時也會被編譯器轉換為view標簽，類似的還有span轉text、a轉navigator等，包括css里的元素選擇器也會轉。但為了管理方便、策略統一，新寫代碼時仍然建議使用view等組件。
  • 開發者可以通過組合這些基礎組件進行快速開發。 基於內置的基礎組件，可以開發各種擴展組件，組件規范與vue組件相同。

text

https://uniapp.dcloud.io/component/text

文本組件。

用於包裹文本內容。

屬性說明

屬性名 類型 默認值 說明 平台差異說明
selectable Boolean false 文本是否可選 App、H5
user-select Boolean false 文本是否可選 微信小程序
space String 顯示連續空格 App、H5、微信小程序
decode Boolean false 是否解碼 App、H5、微信小程序

space 值說明

值 說明
ensp 中文字符空格一半大小
emsp 中文字符空格大小
nbsp 根據字體設置的空格大小

Tips

  • <text> 組件內只支持嵌套 <text>，不支持其它組件或自定義組件，否則會引發在不同平台的渲染差異。

  • 在app-nvue下，只有<text>才能包裹文本內容。無法在<view>組件包裹文本。

  • decode 可以解析的有

    &lt;     	//小於號或顯示標記  < 
&gt;	 	//大於號或顯示標記  >
&amp;		//可用於顯示其它特殊字符  & 
&apos;		// 撇號  '
&nbsp;   	//不斷行的空白
&ensp;		//半個空白位
&emsp;		//一個空白位

  • 各個操作系統的空格標准並不一致。

  • 除了文本節點以外的其他節點都無法長按選中。

  • 支持 \n 方式換行。

  • 如果使用 <span> 組件編譯時會被轉換為 <text>。

示例

<template>
	<view>
		<view>
			<text>唱歌吃飯喝奶</text>
		</view>
		<!-- 長按文本是否可選 	App、H5 -->
		<view>
			<text selectable="true">唱歌吃飯喝奶selectable</text>
		</view>
		<!-- 長按文本是否可選 	微信小程序 -->
		<view>
			<text user-select="true">唱歌吃飯喝奶user-select</text>
		</view>
		<!-- 顯示連續空格的方式 -->
		<view>
			<view>
				<text space='ensp'>來了 老弟</text>
			</view>
			<view>
				<text space='emsp'>來了 老弟</text>
			</view>
			<view>
				<text space='nbsp' style="font-size: 30px;">來了 老弟</text>
			</view>
		</view>
		
		<!-- 是否解碼 -->
		<view>
			<text decode='true'>&amp;</text>
		</view>
	</view>
</template>

<script>
</script>

<style>
</style>

image-20210315165904305

view

https://uniapp.dcloud.io/component/view

視圖容器。

它類似於傳統html中的div，用於包裹各種元素內容。

如果使用nvue，則需注意，包裹文字應該使用組件。

屬性說明

屬性名 類型 默認值 說明
hover-class String none 指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果
hover-stop-propagation Boolean false 指定是否阻止本節點的祖先節點出現點擊態
hover-start-time Number 50 按住后多久出現點擊態，單位毫秒
hover-stay-time Number 400 手指松開后點擊態保留時間，單位毫秒

示例

<template>
	<view class="box2" hover-class="box2_active">
		<view class='box1' hover-class='box-active' hover-stop-propagation :hover-start-time="2000" :hover-stay-time='2000'>
			我是一個盒子
		</view>
	</view>
</template>

<script>
</script>

<style>
	.box1 {
		width: 100px;
		height: 100px;
		background: green;
	}

	.box2 {
		width: 200px;
		height: 200px;
		background: blue;
	}

	.box-active {
		background: red;
	}

	.box2-active {
		background: pink;
	}
</style>

初始狀態

image-20210315172817890

點擊狀態

image-20210315172835331

松開狀態

image-20210315172817890

button

https://uniapp.dcloud.io/component/button?id=button

按鈕。

屬性說明

屬性名 類型 默認值 說明 生效時機 平台差異說明
size String default 按鈕的大小
type String default 按鈕的樣式類型
plain Boolean false 按鈕是否鏤空，背景色透明
disabled Boolean false 是否禁用
loading Boolean false 名稱前是否帶 loading 圖標 App-nvue 平台，在 ios 上為雪花，Android上為圓圈
form-type String 用於 <form> 組件，點擊分別會觸發 <form> 組件的 submit/reset 事件
open-type String 開放能力
hover-class String button-hover 指定按鈕按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果 App-nvue 平台暫不支持
hover-start-time Number 20 按住后多久出現點擊態，單位毫秒
hover-stay-time Number 70 手指松開后點擊態保留時間，單位毫秒
app-parameter String 打開 APP 時，向 APP 傳遞的參數，open-type=launchApp時有效 微信小程序、QQ小程序
hover-stop-propagation boolean false 指定是否阻止本節點的祖先節點出現點擊態 微信小程序
lang string 'en' 指定返回用戶信息的語言，zh_CN 簡體中文，zh_TW 繁體中文，en 英文。 微信小程序
session-from string 會話來源，open-type="contact"時有效 微信小程序
send-message-title string 當前標題 會話內消息卡片標題，open-type="contact"時有效 微信小程序
send-message-path string 當前分享路徑 會話內消息卡片點擊跳轉小程序路徑，open-type="contact"時有效 微信小程序
send-message-img string 截圖 會話內消息卡片圖片，open-type="contact"時有效 微信小程序
show-message-card boolean false 是否顯示會話內消息卡片，設置此參數為 true，用戶進入客服會話會在右下角顯示"可能要發送的小程序"提示，用戶點擊后可以快速發送小程序消息，open-type="contact"時有效 微信小程序
@getphonenumber Handler 獲取用戶手機號回調 open-type="getPhoneNumber" 微信小程序
@getuserinfo Handler 用戶點擊該按鈕時，會返回獲取到的用戶信息，從返回參數的detail中獲取到的值同uni.getUserInfo open-type="getUserInfo" 微信小程序
@error Handler 當使用開放能力時，發生錯誤的回調 open-type="launchApp" 微信小程序
@opensetting Handler 在打開授權設置頁並關閉后回調 open-type="openSetting" 微信小程序
@launchapp Handler 從小程序打開 App 成功的回調 open-type="launchApp" 微信小程序
  • 注1：button-hover 默認為 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
  • open-type="launchApp"時需要調起的APP接入微信OpenSDK詳見

size 有效值

值 說明
default 默認大小
mini 小尺寸

type 有效值

值 說明
primary 微信小程序、360小程序為綠色，App、H5、百度小程序、支付寶小程序、快應用為藍色，字節跳動小程序為紅色，QQ小程序為淺藍色。如想在多端統一顏色，請改用default，然后自行寫樣式
default 白色
warn 紅色

form-type 有效值

值 說明
submit 提交表單
reset 重置表單

open-type 有效值

值 說明 平台差異說明
feedback 打開“意見反饋”頁面，用戶可提交反饋內容並上傳日志 App、微信小程序、QQ小程序
share 觸發用戶轉發 微信小程序、百度小程序、支付寶小程序、字節跳動小程序、QQ小程序
getUserInfo 獲取用戶信息，可以從@getuserinfo回調中獲取到用戶信息，包括頭像、昵稱等信息 微信小程序、百度小程序、QQ小程序
contact 打開客服會話，如果用戶在會話中點擊消息卡片后返回應用，可以從 @contact 回調中獲得具體信息 微信小程序、百度小程序
getPhoneNumber 獲取用戶手機號，可以從@getphonenumber回調中獲取到用戶信息 微信小程序、百度小程序、字節跳動小程序、支付寶小程序
launchApp 小程序中打開APP，可以通過app-parameter屬性設定向APP傳的參數 微信小程序、QQ小程序
openSetting 打開授權設置頁 微信小程序、百度小程序
getAuthorize 支持小程序授權 支付寶小程序
contactShare 分享到通訊錄好友 支付寶小程序
lifestyle 關注生活號 支付寶小程序
openGroupProfile 呼起QQ群資料卡頁面，可以通過group-id屬性設定需要打開的群資料卡的群號，同時manifest中必須配置groupIdList QQ小程序基礎庫1.4.7版本+

示例

<template>
	<view>
		<button>按鈕</button>
		<button size="mini">按鈕</button>
		<button type="primary">按鈕</button>
		<button type="primary" plain>按鈕</button>
		<button type="primary" disabled>按鈕</button>
	</view>
</template>
<script>
</script>
<style>
</style>

image-20210315174705216

image

https://uniapp.dcloud.io/component/image?id=image

圖片。

屬性說明

屬性名 類型 默認值 說明 平台差異說明
src String 圖片資源地址
mode String 'scaleToFill' 圖片裁剪、縮放的模式
lazy-load Boolean false 圖片懶加載。只針對page與scroll-view下的image有效 微信小程序、App、百度小程序、字節跳動小程序
fade-show Boolean true 圖片顯示動畫效果 僅App-nvue 2.3.4+ Android有效
webp boolean false 默認不解析 webP 格式，只支持網絡資源 微信小程序2.9.0
show-menu-by-longpress boolean false 開啟長按圖片顯示識別小程序碼菜單 微信小程序2.7.0
draggable boolean true 鼠標長按是否能拖動圖片 僅 H5 平台 3.1.1+ 有效
@error HandleEvent 當錯誤發生時，發布到 AppService 的事件名，事件對象event.detail = {errMsg: 'something wrong'}
@load HandleEvent 當圖片載入完畢時，發布到 AppService 的事件名，事件對象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

Tips

  • <image> 組件默認寬度 300px、高度 225px；app-nvue平台，暫時默認為屏幕寬度
  • src 僅支持相對路徑、絕對路徑，支持 base64 碼；
  • 頁面結構復雜，css樣式太多的情況，使用 image 可能導致樣式生效較慢，出現 “閃一下” 的情況，此時設置 image{will-change: transform} ,可優化此問題。
  • 自定義組件里面使用 <image>時，若 src 使用相對路徑可能出現路徑查找失敗的情況，故建議使用絕對路徑。
  • webp格式的圖片在Android上是內置支持的。iOS上不同平台不一樣，具體如下：app-vue下，iOS不支持；app-nvue下，iOS支持；微信小程序2.9.0起，iOS支持。
  • svg 格式的圖片在不同的平台支持情況不同。具體為：app-nvue 不支持 svg 格式的圖片，小程序上只支持網絡地址。

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

模式 值 說明
縮放 scaleToFill 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放 aspectFit 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
縮放 aspectFill 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
縮放 widthFix 寬度不變，高度自動變化，保持原圖寬高比不變
縮放 heightFix 高度不變，寬度自動變化，保持原圖寬高比不變 App 和 H5 平台 HBuilderX 2.9.3+ 支持、微信小程序需要基礎庫 2.10.3
裁剪 top 不縮放圖片，只顯示圖片的頂部區域
裁剪 bottom 不縮放圖片，只顯示圖片的底部區域
裁剪 center 不縮放圖片，只顯示圖片的中間區域
裁剪 left 不縮放圖片，只顯示圖片的左邊區域
裁剪 right 不縮放圖片，只顯示圖片的右邊區域
裁剪 top left 不縮放圖片，只顯示圖片的左上邊區域
裁剪 top right 不縮放圖片，只顯示圖片的右上邊區域
裁剪 bottom left 不縮放圖片，只顯示圖片的左下邊區域
裁剪 bottom right 不縮放圖片，只顯示圖片的右下邊區域

示例

<template>
	<view>
		<image src="/static/img/avatar.gif"></image>
		<image src="/static/img/avatar.gif" mode="aspectFit"></image>
		<image src="/static/img/avatar.gif" mode="aspectFill"></image>
	</view>
</template>
<script>
</script>
<style>
</style>

image-20210315175514949


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 uni-app基礎組件 uni-app 修改內置組件默認樣式 uni-app組件使用 uni-app表單組件 uni-app組件之image uni-app中textarea組件 uni-app 更改默認組件樣式 uni-app視頻組件設置圓角 uni-app 導航組件 navigator uni-app 常用框架內置方法 更新中 .....
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM