目錄

view

scroll-view

swiper和swiper-item

text

rich-text

button

image

view

• 普通視圖區(qū)域 塊級元素 類似HTML的div

使用效果:

代碼展示:

list.wxml

<view class="container1">

<view>A</view>

<view>B</view>

<view>C</view>

</view>

list.wxss

/* pages/list/list.wxss */

.container1 {

display: flex;

justify-content: space-around;

}

.container1 view {

width: 5rem;

height: 5rem;

text-align: center;

line-height: 5rem;

}

.container1 view:nth-child(1){

background-color: pink;

}


.container1 view:nth-child(2){
 background-color: skyblue;
}

.container1 view:nth-child(3){ 
background-color: yellow; 
}

scroll-view

• 可滾動的視圖區(qū)域
• 常用來實現(xiàn)滾動列表的效果

使用效果:

代碼展示:

list.wxml

<scroll-view class="container1 container2" scroll-y>

<view>A</view>

<view>B</view>

<view>C</view>

</scroll-view>

list.wxss?

/* pages/list/list.wxss */
.container1 {
  display: flex;
  justify-content: space-around;
}
.container1 view {
  width: 5rem;
  height: 5rem;
  text-align: center;
  line-height: 5rem;
}
.container1 view:nth-child(1){
 background-color: pink;
}

.container1 view:nth-child(2){
  background-color: skyblue;
}

.container1 view:nth-child(3){
 background-color: yellow; 
}
.container2 {
  margin-top: 2rem;
  border: 1px solid red;
  // 必須給scroll-view 固定高度
  height: 6rem;
  width: 5rem;
}

swiper和swiper-item

• 輪播圖容器組件 和 輪播圖 item組件

更多了解屬性

使用效果:

代碼展示:

list.wxml

<swiper class="swiper-container" indicator-dots autoplay>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

?list.wxss

.swiper-container {
  height: 8rem;
}
.item {
  height: 100%;
  line-height: 8rem;
  text-align: center;
}

swiper-item:nth-child(1) .item{
 background-color: pink;
}

swiper-item:nth-child(2) .item {
  background-color: skyblue;
}

swiper-item:nth-child(3) .item {
 background-color: yellow; 
}

text

使用效果:

代碼展示:

<!--pages/list/list.wxml-->
<view>
<text user-select="true">2015年1月，微信第一條朋友圈廣告</text>
<view>不可拷貝</view>
</view>

rich-text

使用效果:

代碼展示:

<!--pages/list/list.wxml-->
<rich-text nodes="<h1 style='color:pink;'>hello world</h1>"></rich-text>

button

• 按鈕組件
• 功能豐富
• 通過open-type屬性可以調(diào)用微信提供的各種功能(獲取用戶授權(quán),轉(zhuǎn)發(fā))

屬性詳情

使用效果:

代碼展示:

<!--pages/list/list.wxml-->
<!-- type 指定按鈕類型 -->
<button>
默認按鈕
</button>
<button type="primary">主色調(diào)按鈕</button>
<button type="warn">警告</button>
<view style="text-align: center;">=============</view>
<!-- size="mini" 選擇小尺寸 -->
<button size="mini">
默認按鈕
</button>
<button type="primary" size="mini">主色調(diào)按鈕</button>
<button type="warn" size="mini">警告</button>
<view style="text-align: center;">=============</view>
<!--plain 鏤空按鈕  -->
<button plain>
默認按鈕
</button>
<button type="primary" plain>主色調(diào)按鈕</button>
<button type="warn" plain>警告</button>

image

mode屬性 用來指定圖片的裁剪和縮放模式

使用效果:

代碼展示:?

list.wxml

<!--pages/list/list.wxml-->
<!-- 空圖片 -->
<image></image>
<!-- 使用src指向圖片路徑 mode 指定圖片裁剪和縮放模式-->
<image mode="widthFix" src="/images/team.jpg"></image>

list.wxss文章來源地址http://www.zghlxwxcb.cn/news/detail-492501.html

image {
  // 通過邊框線證明image有默認的寬和高
  border: 1px solid pink;
}

到了這里，關(guān)于微信小程序-常用視圖容器類組件[圖文并茂 通俗易懂]的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！