微信小程序-常用视图容器类组件[图文并茂 通俗易懂]

目录

view

scroll-view

swiper和swiper-item

text

rich-text

button

image

---

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

更多了解属性

使用效果:

代码展示:

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属性可以调用微信提供的各种功能(获取用户授权,转发)

属性详情

使用效果:

代码展示:

<!--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;
}