微信小程序の再体验 - - 常用组件-CFANZ编程社区

常用组件

组件	解释
view	普通视图容器类，类似于html中的div（是一个块级元素），常用来实现页面布局效果
scroll-view	可滚动视图容器，常用来实现滚动列表效果
swiper和swiper-item	轮播图视图容器组件和轮播图项目组件
text	文本区域，通过`selectable`属性可以实现`长按选中文本`内容（view无法实现）
rich-text	通过`nodes`属性节点将`html字符串渲染为对应的UI`结构
button	按钮组件，比html功能丰富（通过open-type属性可调用微信通过的各种功能[客服、转发、获取用户授权、获取用户信息]）
image	图片组件（默认宽度为300px，高240px）
navigator	页面导航组件（类似于html中的a链接）

1.1.view

<!--pages/list/list.wxml-->
<!-- 不能设置类名为container -->
<view class="container1">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</view>

/* pages/list/list.wxss */
.container1{
  display: flex;
  justify-content: space-around;  /* 实现横向分散布局 */
}
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;  /* 左右居中 */
  line-height: 100px;  /* 上下居中，行高等于容器高度 */
}
.container1 view:nth-child(1){
  background-color: aqua;
}
.container1 view:nth-child(2){
  background-color: rebeccapurple;
}
.container1 view:nth-child(3){
  background-color: yellowgreen;
}

1.2.scroll-view

<!--pages/list/list.wxml-->
<!-- 注意：使用纵向滚动时，必须给 scroll-view 一个固定高度 -->
<!-- scroll-x : 运行横向滚动 -->
<!-- scroll-y : 运行纵向滚动 -->
<scroll-view class="container1" scroll-y>
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

/* pages/list/list.wxss */
.container1{
  display: flex;
  justify-content: space-around;  /* 实现横向分散布局 */
  border: 1px solid red;
  height: 150px;  /* 使用纵向滚动时，必须给 scroll-view 一个固定高度 */
  width: 100px;
}
.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;  /* 左右居中 */
  line-height: 100px;  /* 上下居中，行高等于容器高度 */
}
.container1 view:nth-child(1){
  background-color: aqua;
}
.container1 view:nth-child(2){
  background-color: rebeccapurple;
}
.container1 view:nth-child(3){
  background-color: yellowgreen;
}

1.3.swiper 和 swiper-item

在这里插入图片描述

<!--pages/lunbotu/lunbotu.wxml-->
<!-- indicator-dots：显示面板指示点 -->
<!-- circular="true"采用衔接滑动，如果图片播放完了，就继续播放第一张图片 -->
<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="yellow" autoplay="true" interval="1000" circular="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>

/* pages/lunbotu/lunbotu.wxss */
.swiper-container{
  height: 150px;   /* 强制指示轮播图的高度 */
}
.item{
  height: 100%;
  text-align: center;   /* 水平居中 */
  line-height: 150px;   /* 垂直居中 */
}
swiper-item:nth-child(1) .item{
  background-color: lightblue;
}
swiper-item:nth-child(2) .item{
  background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
  background-color: lightpink;
}

1.4.text和rich-text

<text selectable>这是我的手机号：15978521854</text>
<rich-text nodes="<h1 style='color :red;'>标题</h1>"></rich-text>

1.5.button

属性	解释
type	指定按钮类型，默认灰色按钮，primary（绿色按钮），warn（警告按钮）
size	指定按钮尺寸大小，默认大尺寸，mini（小尺寸）
plain	指定按钮是否镂空

<button>默认按钮</button>
<button type="primary">绿色按钮</button>
<button type="warn">警告按钮</button>

<button size="mini">小尺寸白色按钮</button>
<button type="primary" size="mini">绿色小按钮</button>
<button type="warn" size="mini">警告小按钮</button>

<button size="mini" plain>小尺寸白色镂空按钮</button>
<button type="primary" size="mini" plain>小尺寸绿色镂空按钮</button>
<button type="warn" size="mini" plain>小尺寸红色镂空按钮</button>

1.6.image

在这里插入图片描述

<image></image>  <!-- 空图片 -->
<image src="../../images/download.jpg"></image>   <!-- mode属性使图片有默认的宽度和高度，优点是图片不会被裁剪和缩放，，缺点是图片会失真 -->
<image src="../../images/download.jpg" mode="heightFix"></image>   <!-- 高度不变，宽度根据图片的高宽比自适应-->