view標(biāo)簽

等效于html中的div

都是塊級元素，獨(dú)占一行，可設(shè)置寬高。

屬性類型默認(rèn)值

hover-class	string	none

hover的中文意思是懸浮，但在微信小程序里面是按下去的意思。

當(dāng)用戶按下按鈕的時候生效。

text標(biāo)簽

等效于html中的span標(biāo)簽

屬性類型默認(rèn)值說明

user-select	boolean	false	文本是否可選，該屬性會使文本節(jié)點(diǎn)顯示為 inline-block
space	string	無	顯示連續(xù)空格
decode	boolean	false	是否解碼

user-select，就是是否允許用戶進(jìn)行選擇，選擇后會出現(xiàn)對話框（復(fù)制，粘貼）。

備注：這個效果只有真機(jī)可以測試出來，在微信小程序代碼編輯器中無法顯示。

space就是是否解析連續(xù)的空格。

眾所周知，在html中文字中間有連續(xù)的空格的時候，html會解析成一個空格。詳細(xì)解析

所以，微信小程序，對它進(jìn)行了補(bǔ)充，允許解析連續(xù)空格。

<text>文字 中間 有空格 </text><text space="nbsp">文字 中間 有空格 </text>

加了 space=“nbsp” 后連續(xù)空格就別解析出來了。

推薦space使用屬性nbsp，其余的不用去記，用不上。

decode屬性就是表示是否解碼

<text decode="true">中間&nbsp;空格&lt;; </text>

可以用來解碼

&nbsp; 和 &lt;等

navigator標(biāo)簽

等效于html中的a標(biāo)簽

navigator的中文含義是導(dǎo)航，字面意思，把你導(dǎo)向其他方向。

比如從主頁跳轉(zhuǎn)到logs頁面

<navigator url="/pages/logs/logs">點(diǎn)我跳轉(zhuǎn)到日志 </navigator>

這種默認(rèn)打開后是二級頁面的形式，左上角有個返回按鈕。

如果不想二級頁面，想作為一個新的頁面，那么就在 open-type里面寫上redirect。

<navigator url="/pages/logs/logs" open-type="redirect">點(diǎn)我跳轉(zhuǎn)到日志 </navigator>

此時左上角就是一個小屋子圖標(biāo)。

icon標(biāo)簽

見名知意，用于顯示圖標(biāo)。

屬性類型默認(rèn)值必填說明

type	string		是	icon的類型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size	number/string	23	否	icon的大小
color	string		否	icon的顏色，同css的color

<icon type="success" size="60" class="box"></icon>

type的有效值有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

scroll-view標(biāo)簽

你可以把它理解成手機(jī)端的滾動條，可以橫著滾，也可以豎著滾。

屬性默認(rèn)值必填說明

scroll-x	false	否	允許橫向滾動
scroll-y	false	否	允許縱向滾動

滾動條demo

<scroll-view scroll-x><view class="out"><icon type="success" size="60" class="box"></icon><icon type="success_no_circle" size="60" class="box"></icon><icon type="info" size="60" class="box"></icon><icon type="warn" size="60" class="box"></icon><icon type="waiting" size="60" class="box"></icon><icon type="cancel" size="60" class="box"></icon><icon type="download" size="60" class="box"></icon><icon type="search" size="60" class="box"></icon><icon type="clear" size="60" class="box"></icon></view> </scroll-view> .out{display: flex;flex-wrap: nowrap; }

總結(jié)

以上是生活随笔為你收集整理的微信小程序_组件学习_001的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。