『微信小程序』从0到1常用组件

🐱‍🐉🐱‍🐉🐱‍🐉 请乘理想之马，挥鞭从此起程，路上春色正好，天上太阳正晴🐾🐾🐾

🌈博客主页👉白小筠

常见的视图容器类组件

1、view

• 普通视图区域
• 类似于HTML中的div，是一个块级元素
• 常用来实现页面的布局效果

2、scroll-view

• 可滚动的视图区域
• 常用来实现滚动列表效果

3、swiper和swiper-item

• 轮播图容器组件和轮播图item组件

view组件的基本使用

实现效果：

实现步骤：
list.wxml

A
B
C

1
2
3
4
5

编辑样式在list.wxss

.container1 view{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: limegreen;
}
.container1 view:nth-child(2){
  background-color: lightblue;
}
.container1 view:nth-child(3){
  background-color: lightpink;
}
.container1{
  /* 横向对齐 */
display: flex;
justify-content: space-around;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

实现纵向滚动效果

效果展示：

实现步骤：

1、设置scroll-y="true“

A
B
C

1
2
3
4
5

2、设置高度
需要设置高度，要不然页面不会显示滚动条

.container1{
border: 1px solid red;
width: 100px;
height: 120px;
}

1
2
3
4
5
6

实现轮播图

A



  B



  C


1
2
3
4
5
6
7
8
9
10
11
12
13
14

样式

.swiper-container{
  height: 150px;
}

.item{
  height: 100%;
  line-height: 150px;
  text-align: center;
}
swiper-item:nth-child(1) .item{
   background-color: lightblue;
}

swiper-item:nth-child(2) .item{
  background-color: red;
}
swiper-item:nth-child(3) .item{
  background-color: seashell;
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

swiper组件的常用属性

1、indicator-dots属性

1

让轮播图出现小点

效果展示：

2、indicator-color指示点颜色

1

效果展示

3、indicator-active-color被激活的小圆点的颜色

1

4、autoplay：自动切换默认5秒

1

5、interval 自定义切换时间

1

6、circulars是否采用衔接滑动

1
2
3

常用的基础组件内容

1、text组件的selectable的属性，实现长按选中文本内容的效果

需要使用真机调试查看效果

手机号支持长按选中效果
13800005056

1
2
3
4

2、rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结构

1

效果展示：

3、button组件

• 按钮组件
• 功能比HTML的button按钮丰富
• 通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)

通过type指定按钮类型

普通按钮
主色调按钮
警告按钮
1
2
3

通过size属性指定按钮的大小

主色调按钮
1

通过plain设置镂空按钮

警告按钮
1

效果展示：

4、image组件

图片组件

1
2
3

image{
  border: 1px solid;
}
1
2
3

image组件中通过model属性指定图片的裁剪和缩放模式，常用的model下属性如下