微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1. view组件

view组件就类似于html中的div标签

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

list.wxml

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

list.wxss

.container1 view{
  	width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

.container1{
  display: flex;
  justify-content: space-around;
}

2. scroll-view 组件

scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

list.wxml

<scroll-view class="container" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

list.wxss

/* pages/list/list.wxss */
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

.container1{
  justify-content: space-around;
  height: 150px;
  width: 100px;
  border: 1px solid red;
}

3. swiper 和 swiper-item 组件

swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

其中swiper组件中的indicator-dots属性为是否在轮播图面板上显示指示点，若想显示，那么将其indicator-dots属性设置为true.

list.wxml

<swiper class="swiper-container" indicator-dots="true">
  <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

/* pages/list/list.wxss */
.swiper-container{
  height: 150px;
}

.item{
  height: 150px;
  line-height: 150px;
  text-align: center;
}


swiper-item:nth-child(1){
  background-color: lightgreen;
}
swiper-item:nth-child(2){
  background-color: lightpink;
}
swiper-item:nth-child(3){
  background-color: lightcoral;
}

3.1. swiper组件中的常用属性

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

官网地址【swiper组件】

4. text 和 rich-text组件

4.1. text组件

text为文本组件，类似于html中的span标签，也是一个行内元素

text组件一个常用的功能：长按选中功能（text组件的selectbale属性）

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

list.wxml

<view>
  微信号:
  <text selectable>robin_zh</text>
</view>

4.2. rich-text 组件

rich-text 组件为富文本组件，它可以通过nodes属性将HTML字符串渲染为wxml结构

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

<rich-text nodes="<h1>HTML字符串</h1>"></rich-text>

5. button 组件

button组件，微信小程序为其提供了诸多属性，type ,size,plain…，同时button组件可以通过open-type属性调用微信提供的各种功能（客服，转发，获取用户权限，信息等）

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

<view>=====1.普通按钮，通过type来指定颜色======</view>
<button>默认按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>

<view>=====2.迷你按钮，通过size来指定尺寸======</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>

<view>======3.镂空按钮，通过plain指定镂空======</view>
<button plain>默认按钮</button>
<button type="primary" plain>主色调按钮</button>
<button type="warn" plain>警告按钮</button>

6. image组件

image组件就和html中的img标签是完全一样的，只不过在微信小程序中的image组件即使没有图片也会默认占据一部分位置（大约300px*240px）

微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image,微信小程序,微信小程序,notepad++,小程序

<image/>
<image src="./kl.jpg" />

/* pages/list/list.wxss */
image{
  border: 1px solid red;
  margin-bottom: 4px;
}

6.1. image的mode属性

image组件的mode属性用来指定图片的裁剪和缩放模式

mode属性的默认值为scaleToFill,不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素。

mode属性值的说明:文章来源地址https://www.toymoban.com/news/detail-550633.html

合法值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

到了这里，关于微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！