当前位置：网站首页>【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)

【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)

2022-06-30 15:48:00 【苏凉.py】

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

给大家推荐一款神器。无论你是学生党还是上班族都可以使用，这里涵盖了面试题库，在线刷题，各个大厂的面试/笔试真题等。如果你还是学生，最重要的一点就是模拟面试功能，智能AI1v1面试，帮助你早日拿到大厂offer！点击链接即可直达！=>牛客网-找工作神器

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

WXML代码：
在这里插入图片描述
WXSS代码：

实现效果：

在这里插入图片描述

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

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

WXML代码：
在这里插入图片描述
WXSS代码：

实现效果：

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

swiper组件的常用属性

WXML代码：
在这里插入图片描述

WXSS代码：
在这里插入图片描述
实现效果：

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

富文本组件，支持把HTML字符串渲染为WXML结构。
通过rich-text组件的nodes属性节点，把 HTML字符串渲染为对应的UI结构。
WXML代码：
在这里插入图片描述
实现效果：

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

普通按钮/主色调按钮/警告按钮，默认自动换行
在这里插入图片描述
样式：

设置size="mini"即可，设置之后不换行
在这里插入图片描述
样式：

去除背景色。添加plain属性即可。
在这里插入图片描述
样式：

图片组件，image 组件默认宽度约300px、高度约240px
通过src属性添加图片地址：
在这里插入图片描述

mode值	说明
`scaleToFill`	(默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满`image`元素
`aspectFit`	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
`aspectFill`	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
`widthFix`	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
`heightFix`	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变