微信小程序_组件学习_001
view標簽
等效于html中的div
都是塊級元素,獨占一行,可設置寬高。
| hover-class | string | none |
hover的中文意思是懸浮,但在微信小程序里面是按下去的意思。
當用戶按下按鈕的時候生效。
text標簽
等效于html中的span標簽
| user-select | boolean | false | 文本是否可選,該屬性會使文本節點顯示為 inline-block |
| space | string | 無 | 顯示連續空格 |
| decode | boolean | false | 是否解碼 |
user-select,就是是否允許用戶進行選擇,選擇后會出現對話框(復制,粘貼)。
備注:這個效果只有真機可以測試出來,在微信小程序代碼編輯器中無法顯示。
space就是是否解析連續的空格。
眾所周知,在html中文字中間有連續的空格的時候,html會解析成一個空格。詳細解析
所以,微信小程序,對它進行了補充,允許解析連續空格。
<text>文字 中間 有空格 </text><text space="nbsp">文字 中間 有空格 </text>加了 space=“nbsp” 后連續空格就別解析出來了。
推薦space使用屬性nbsp,其余的不用去記,用不上。
decode屬性就是表示是否解碼
<text decode="true">中間 空格<; </text>可以用來解碼
和 <等navigator標簽
等效于html中的a標簽
navigator的中文含義是導航,字面意思,把你導向其他方向。
比如從主頁跳轉到logs頁面
<navigator url="/pages/logs/logs">點我跳轉到日志 </navigator>這種默認打開后是二級頁面的形式,左上角有個返回按鈕。
如果不想二級頁面,想作為一個新的頁面,那么就在 open-type里面寫上redirect。
<navigator url="/pages/logs/logs" open-type="redirect">點我跳轉到日志 </navigator>此時左上角就是一個小屋子圖標。
icon標簽
見名知意,用于顯示圖標。
| type | string | 是 | icon的類型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear | |
| size | number/string | 23 | 否 | icon的大小 |
| color | string | 否 | icon的顏色,同css的color |
type的有效值有:success, success_no_circle, info, warn, waiting, cancel, download, search, clear
scroll-view標簽
你可以把它理解成手機端的滾動條,可以橫著滾,也可以豎著滾。
| 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; }總結
以上是生活随笔為你收集整理的微信小程序_组件学习_001的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【BUG解决】使用body-parser
- 下一篇: 【报错解决】gcc编译运行c语言程序报警