前言：
现时小伙伴们对“容器组件有哪些”可能比较看重，姐妹们都需要了解一些“容器组件有哪些”的相关文章。那么小编在网上收集了一些对于“容器组件有哪些””的相关知识，希望咱们能喜欢，姐妹们快快来学习一下吧！view普通视图区域 块级元素 类似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可滚动的视图区域常用来实现滚动列表的效果使用效果:
代码展示:
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组件更多了解属性:swiper | 微信开放文档 (qq.com)
使用效果:
代码展示:
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属性
类型
默认值
必填
说明
最低版本
user-select
boolean
false
否
文本是否可选，该属性会使文本节点显示为 inline-block
2.12.1
space
string
否
显示连续空格
1.4.0
decode
boolean
false
否
是否解码
1.4.0
使用效果:
代码展示:
<!--pages/list/list.wxml--><view><text user-select="true">2015年1月，微信第一条朋友圈广告</text><view>不可拷贝</view></view>
rich-text
属性
类型
默认值
必填
说明
最低版本
nodes
array/string
[]
否
节点列表/HTML String
1.4.0
space
string
否
显示连续空格
2.4.1
user-select
boolean
false
否
文本是否可选，该属性会使节点显示为 block
2.24.0
使用效果:
代码展示:
<!--pages/list/list.wxml--><rich-text nodes="<h1 style='color:pink;'>hello world</h1>"></rich-text>
button按钮组件功能丰富通过open-type属性可以调用微信提供的各种功能(获取用户授权,转发)
属性详情:button | 微信开放文档 (qq.com)
使用效果:
代码展示:
<!--pages/list/list.wxml--><!-- type 指定按钮类型 --><button>默认按钮</button><button type="primary">主色调按钮</button><button type="warn">警告</button><view style="text-align: center;">=============</view><!-- size="mini" 选择小尺寸 --><button size="mini">默认按钮</button><button type="primary" size="mini">主色调按钮</button><button type="warn" size="mini">警告</button><view style="text-align: center;">=============</view><!--plain 镂空按钮 --><button plain>默认按钮</button><button type="primary" plain>主色调按钮</button><button type="warn" plain>警告</button>
image
mode属性 用来指定图片的裁剪和缩放模式
mode
string
scaleToFill
否
图片裁剪、缩放的模式
1.0.0
合法值
说明
最低版本
scaleToFill
缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit
缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill
缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix
缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix
缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
2.10.3
使用效果:
代码展示:
list.wxml
<!--pages/list/list.wxml--><!-- 空图片 --><image></image><!-- 使用src指向图片路径 mode 指定图片裁剪和缩放模式--><image mode="widthFix" src="/images/team.jpg"></image>
list.wxss
image { // 通过边框线证明image有默认的宽和高 border: 1px solid pink;} 
