0
点赞
收藏
分享

微信扫一扫

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


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

文章目录

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

常用的视图容器类组件

view

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

WXML代码:

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


WXSS代码:

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


实现效果:

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

Flex布局传送门:​​【小程序】&【web前端】必备-Flex布局详解(弹性盒子)​​

scroll-view(滚动)

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

WXML代码:

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


WXSS代码:

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


实现效果:

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

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代码:

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

WXSS代码:

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


实现效果:

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

常用的基础内容组件

text

文本组件,类似于HTML中的span标签,是一个行内元素

使用text组件并添加​​selectable属性​​可以实现长按选中的效果。

WXML代码:

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


实现效果:

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

rich-text

富文本组件,支持把HTML字符串渲染为WXML结构

通过rich-text组件的​​nodes属性​​节点,把 HTML字符串渲染为对应的UI结构。

WXML代码:

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


实现效果:

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

其他常用组件

button

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

三种按钮样式

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

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


样式:

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

小按钮(mini)

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

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


样式:

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

镂空按钮(plain)

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

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


样式:

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

image

图片组件,image 组件默认宽度约300px、高度约240px

通过​​src属性​​添加图片地址:

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


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

image的mode属性

mode值

说明

​scaleToFill​

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

​aspectFit​

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

​aspectFill​

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

​widthFix​

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

​heightFix​

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

下面我们来看看效果:

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

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

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

  7. widthFix
  8. 【微信小程序】常用组件基本使用(view/scroll-view/swiper、text/rich-text、button/image)_原力计划_25

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

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


举报

相关推荐

0 条评论