02-11 基本組件

1. 基本組件

小程序提供了常用的標簽組件用於構建頁面

組件

前端的菜雞，你的福利來了

1.1. view

類似 div

屬性名	類型	默認值	說明
hover-class	String	none	指定按下去的樣式類。當 hover-class="none" 時，沒有點擊態效果

1.1.1. 代碼

  <view hover-class="h-class">
  點擊我試試
  </view>
  <!-- wxss -->
  .h-class{
    background-color: yellow;
  }

1.2. text

顯示普通的文本 text只能嵌套text

屬性名	類型	默認值	說明
selectable	Boolean	false	文本是否可選
decode	Boolean	false	是否解碼

1.2.1. 代碼

  <text selectable="{{false}}" decode="{{false}}">
    普&nbsp;通
  </text>

1.3. image

圖片標簽，image組件默認寬度320px、高度240px

**注意：該標簽 其實是 web中的 圖片標簽 和 背景圖片的結合！！！ 並且不支持以前的web中的背景圖片的寫法！！！ **

屬性名	類型	默認值	說明
src	String		圖片資源地址，支持雲文件ID（2.2.3起）
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對page與scroll-view下的image有效

mode 有效值：

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

模式	值	說明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。
縮放	aspectFill	保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。
縮放	widthFix	寬度不變，高度自動變化，保持原圖寬高比不變
裁剪	top	不縮放圖片，只顯示圖片的頂部區域
裁剪	bottom	不縮放圖片，只顯示圖片的底部區域
裁剪	center	不縮放圖片，只顯示圖片的中間區域
裁剪	left	不縮放圖片，只顯示圖片的左邊區域
裁剪	right	不縮放圖片，只顯示圖片的右邊區域
裁剪	top left	不縮放圖片，只顯示圖片的左上邊區域
裁剪	top right	不縮放圖片，只顯示圖片的右上邊區域
裁剪	bottom left	不縮放圖片，只顯示圖片的左下邊區域
裁剪	bottom right	不縮放圖片，只顯示圖片的右下邊區域

​ 前端菜雞，別急還有更厲害的

1.4. swiper

微信內置有輪播圖組件

默認寬度 100% 高度 150px

屬性名	類型	默認值	說明
indicator-dots	Boolean	false	是否顯示面板指示點
indicator-color	Color	rgba(0, 0, 0, .3)	指示點顏色
indicator-active-color	Color	#000000	當前選中的指示點顏色
autoplay	Boolean	false	是否自動切換
interval	Number	5000	自動切換時間間隔
circular	Boolean	false	是否采用銜接滑動

1.4.1. swiper

滑塊視圖容器。

1.4.2. swiper-item

滑塊

默認寬度和高度都是100%

1.5. video

視頻。該組件是原生組件，使用時請注意相關限制。

屬性名	類型	默認值	說明
src	String		要播放視頻的資源地址，支持雲文件ID（2.2.3起）
duration	Number		指定視頻時長
controls	Boolean	true	是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間）
autoplay	Boolean	false	是否自動播放
loop	Boolean	false	是否循環播放
muted	Boolean	false	是否靜音播放

<video src="{{src}}" controls></video>