微信小程序UI组件如何使用（微信小程序-常用视图容器类组件）
微信小程序UI组件如何使用（微信小程序-常用视图容器类组件）/* 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: 2
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 | |||||||||||||||||||
| ||||||||||||||||||||||||
使用效果:
代码展示:
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;
}
