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

这篇具有很好参考价值的文章主要介绍了微信小程序-常用视图容器类组件[图文并茂通俗易懂]。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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文章来源地址https://www.toymoban.com/news/detail-492501.html

image {
  // 通过边框线证明image有默认的宽和高
  border: 1px solid pink;
}

到了这里，关于微信小程序-常用视图容器类组件[图文并茂通俗易懂]的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

view

scroll-view

swiper和swiper-item

text

rich-text

button

image

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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

view

scroll-view

swiper和swiper-item

text

rich-text

button

image

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

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