微信小程序界面布局（微信小程序-常用視圖容器類組件）

2023-10-13 10:16:01 2

view普通視圖區域塊級元素類似HTML的div

使用效果:

代碼展示:

list.wxml

ABC

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可滾動的視圖區域常用來實現滾動列表的效果

使用效果:

代碼展示:

list.wxml

ABC

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組件

更多了解屬性:swiper | 微信開放文檔 (qq.com)

使用效果:

代碼展示:

list.wxml

ABC

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

屬性	類型	默認值	必填	說明	最低版本
user-select	boolean	false	否	文本是否可選，該屬性會使文本節點顯示為 inline-block	2.12.1
space	string	否	顯示連續空格	1.4.0
decode	boolean	false	否	是否解碼	1.4.0

使用效果:

代碼展示:

2015年1月，微信第一條朋友圈廣告不可拷貝

rich-text

屬性	類型	默認值	必填	說明	最低版本
nodes	array/string	[]	否	節點列表/HTML String	1.4.0
space	string	否	顯示連續空格	2.4.1
user-select	boolean	false	否	文本是否可選，該屬性會使節點顯示為 block	2.24.0

使用效果:

代碼展示:

button按鈕組件功能豐富通過open-type屬性可以調用微信提供的各種功能(獲取用戶授權,轉發)

屬性詳情:button | 微信開放文檔 (qq.com)

使用效果:

代碼展示:

默認按鈕主色調按鈕警告=============默認按鈕主色調按鈕警告=============默認按鈕主色調按鈕警告

image

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

mode

string

scaleToFill

否

圖片裁剪、縮放的模式

1.0.0

合法值	說明	最低版本
scaleToFill	縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
aspectFit	縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是說，可以完整地將圖片顯示出來。
aspectFill	縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也就是說，圖片通常只在水平或垂直方向是完整的，另一個方向將會發生截取。
widthFix	縮放模式，寬度不變，高度自動變化，保持原圖寬高比不變
heightFix	縮放模式，高度不變，寬度自動變化，保持原圖寬高比不變	2.10.3