1.text文本(類似span)
| 屬性名 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可選,除了text組件外,其他組件都無法長按選中 |
| space | String | false | 顯示連續空格,可選值:ensp,emsp,nbsp |
| decode | Boolean | false | 是否解碼,可決議 &\nbsp; &\lt; &\gt; &\amp; &\apos; &\ensp; &\emsp; |
ensp:把空格顯示為一個英文的長度
emsp:把空格顯示為一個漢字的長度
nbsp:把空格渲染為當前文字大小的一個長度
\是為了讓解碼的代碼正常顯示出來
rich-text
- 富文本組件
- 支持把HTML字串渲染為WXML結構
<\rich-text nodes="<h1 style='color:red">標題"</rich-text>
2.view視圖容器(類似div)
| 屬性名 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的樣式類,當hover-class='none'時,沒有點擊效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本節點的祖先節點出現點擊態 |
| hover-start-time | Number | 50 | 按住后多久出現點擊態,單位毫秒 |
| hover-stay-time | Number | 400 | 手指松開后點擊態保留時間,單位毫秒 |
button按鈕 功能比HTML中的button按鈕豐富 通過open-type屬性可以呼叫微信提供的各種功能(客服,轉發,獲取用戶授權,獲取用戶資訊等)
| 屬性名 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| size | String | default | 按鈕的大小 |
| type | String | default | 按鈕的樣式型別 |
| plain | Boolean | false | 按鈕是否鏤空,背景透明色 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名稱前是否帶loading圖示 |
input:
| 屬性名 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| value | String | 輸入框的初始內容 | |
| type | String | "text" | input的型別 |
| password | Boolean | false | 是否是密碼型別 |
| placeholder | String | 輸入框為空時占位符 | |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大輸入長度,設定-1時不限制最大長度 |
navigator(類似a標簽) 超鏈接
image圖片(類似img)
- 常見屬性:
- 1.src:支持本地和網路上的圖片
- 2,.mode:指定圖片裁剪 縮放的模式(13種模式 4種縮放模式 9種裁剪模式 見官方檔案)
注意:image組件默認寬度300px,高度225px
與css相比 wxss擴展的特性有:
- 尺寸單位
- 樣式匯入
rpx:是微信小程式獨有的,解決螢屏自適應的尺寸單位 px與rpx: 以iPhone6為例 iPhone6螢屏寬度為375px 共有750像素 則750px=375rpx=750物理像素 1rpx=0.5px=1物理像素
| 屬性名 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| size | String | default | 按鈕的大小 |
| type | String | default | 按鈕的樣式型別 |
| plain | Boolean | false | 按鈕是否鏤空,背景透明色 |
| disabled | Boolean | false | 是否禁用 |
| loading | Boolean | false | 名稱前是否帶loading圖示 |
input:
| 設備 | rox換算px(螢屏寬度/750) | px換算rpx(750/螢屏寬度) |
|---|---|---|
| iphone5 | 1rpx=0.42px | 1px=2.34rpx |
| iphone6 | 1rpx=0.5px | 1px=2rpx |
| iphone6 Plus | 1rpx=0.552px | 1px=1.81rpx |
@import 樣式匯入 @import 'wxss樣式表的相對路徑';
scorll-view
- 可滾動的視圖區域
- 常用來實作滾動串列效果
- scroll-y 允許縱向滾動
- scroll-x 允許橫向滾動
swiper和swiper-item - 輪播圖容器組件和輪播圖item組件
| 屬性 | 型別 | 默認值 | 說明 |
|---|---|---|---|
| indicator-dots | boolean | false | 是否顯示面板指示點 |
| indicator-color | color | rgba(0,0,0,.3 | 指示點顏色 |
| indicator-active-color | color | #000000 | 當前選中的指示點顏色 |
| autoplay | Boolean | false | 是否自動切換 |
| interval | number | 50000 | 自動切換時間間隔 |
| circular | boolean | false | 是否采用銜接滑動 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/236618.html
標籤：其他