??作者简介：苏凉（专注于网络爬虫，数据分析，正在学习前端的路上）
??博客主页：的博客
??系列专栏：小程序开发基础教程
??名言警句：海阔凭鱼跃，天高任鸟飞。
??要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！
??关注点赞??收藏??

文章目录

• 常用的视图容器类组件
• • view
  • scroll-view（滚动）
  • swiper和swiper-item（轮播图）
• 常用的基础内容组件
• • text
  • rich-text
• 其他常用组件
• • button
  • • 三种按钮样式
    • 小按钮（mini）
    • 镂空按钮（plain）
  • image
  • • image的mode属性

常用的视图容器类组件

view

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

WXML代码：

WXSS代码：

实现效果：

Flex布局传送门：【小程序】&【web前端】必备-Flex布局详解（弹性盒子）

scroll-view（滚动）

可滚动的视图区域，常用来实现滚动列表效果。
添加属性 scroll-y，即为纵向滚动。scroll-x，即为横向滚动。

WXML代码：

WXSS代码：

实现效果：

swiper和swiper-item（轮播图）

轮播图容器组件，轮播图item组件

swiper组件的常用属性

属性

类型

默认值

说明

indicator-dots

boolean

false

是否显示面板指示点

indicator-color

color

rgba（0,0,0,3）

指示点颜色

indicator-active-color

color

#000000

当前选中的指示点颜色

autoplay

boolean

false

是否自动切换

interval

number

5000

自动切换时间间隔

circular

boolean

false

是否采用衔接滑动

WXML代码：

WXSS代码：

实现效果：

常用的基础内容组件

text

文本组件，类似于HTML中的span标签，是一个行内元素。
使用text组件并添加selectable属性可以实现长按选中的效果。
WXML代码：

实现效果：

rich-text

富文本组件，支持把HTML字符串渲染为WXML结构。
通过rich-text组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构。
WXML代码：

实现效果：

其他常用组件

button

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

三种按钮样式

普通按钮/主色调按钮/警告按钮，默认自动换行

样式：

小按钮（mini）

设置size="mini"即可，设置之后不换行

样式：

镂空按钮（plain）

去除背景色。添加plain属性即可。

样式：

image

图片组件，image 组件默认宽度约300px、高度约240px
通过src属性添加图片地址：

image的mode属性

mode值

说明

scaleToFill

(默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

aspectFit

缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。

aspectFill

缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

widthFix

缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

heightFix

缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

下面我们来看看效果：

1. scaleToFill
   
2. aspectFill
   
3. aspectFit
   
4. widthFix
5. heightFix
   

到这里我们在小程序中常用的基础组件就介绍完了，欢迎订阅本专栏，持续更新中…

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦