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

简介: 文章目录常用的视图容器类组件viewscroll-view(滚动)swiper和swiper-item(轮播图)常用的基础内容组件textrich-text其他常用组件button三种按钮样式小按钮(mini)镂空按钮(plain)imageimage的mode属性

常用的视图容器类组件

view

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

WXML代码:

image.png

image.png

image.png

scroll-view(滚动)

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

添加属性 scroll-y,即为纵向滚动。scroll-x,即为横向滚动。

WXML代码:


image.png

image.png

实现效果

b690c232559247aa89987c0a9dc3c70c.gif

swiper和swiper-item(轮播图)

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

swiper组件的常用属性

image.png

WXML代码:

image.png

WXSS代码:

4c10b739e02c4f3bad7a1732ecadea64.png

实现效果:

08e6ccff4d194082bffbca08093ab85c.gif

常用的基础内容组件

text

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

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

WXML代码:


image.png

6e06d7e0b194409ab0c65501e9e2faa5.gif

rich-text

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

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

WXML代码:

image.png

其他常用组件

button

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

三种按钮样式

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

image.png

小按钮(mini)

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

image.png

镂空按钮(plain)

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

image.png

image

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

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

image.png

image.png下面我们来看看效果:

  1. scaleToFill

image.png

2 aspectFill

image.png

image.png

image.png

image.png


相关文章
|
1月前
|
小程序 数据库
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
【微信小程序-原生开发】实用教程10 - 动态的新增、修改、删除(含微信云数据库的新增、修改、删除,表单弹窗、确认弹窗、日期选择器、单行输入框、多行输入框、滑动组件的使用)
31 0
|
8天前
|
JSON 小程序 前端开发
终于搞懂了!微信小程序的渲染机制及组件使用
【8月更文挑战第8天】微信小程序的渲染机制及组件使用
23 3
终于搞懂了!微信小程序的渲染机制及组件使用
|
1天前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
Ant Design Mini 问题之在微信小程序中,由于不支持slot特性,Ant Design Mini的什么组件功能受到了限制,如何解决
|
5天前
|
小程序
|
1月前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
73 0
|
1月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
40 0
|
1月前
|
JSON 小程序 数据库
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
【微信小程序-原生开发】实用教程14 - 列表的分页加载,触底加载更多(含无更多数据的提醒和显示,自定义组件)
32 0
|
1月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
35 0
|
3月前
|
小程序
微信小程序-其他常用组件
该内容是关于微信小程序组件的介绍,主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富,通过`open-type`可调用微信功能,如客服、转发等。组件属性包括类型(如`primary`、`warn`)和尺寸(`size`)。`image`组件默认宽300px,高240px,支持设置属性来调整显示效果。`navigator`组件用于页面导航,类似HTML的a标签,常用于页面间的跳转。
36 0
|
3月前
|
小程序
微信小程序-常用的基础内容组件
以下是内容的摘要: 本文介绍了微信小程序中几个重要的组件:text、rich-text和progress。text组件类似于HTML的span标签,用于显示文本,通过selectable属性可实现长按选中文本。rich-text组件能够将HTML字符串渲染成WXML结构,展示富文本内容。progress组件则用于展示进度条,支持不同状态(如成功、警告、等待等)以及自定义颜色和宽度。icon组件则提供了一组预定义的图标,可用于表示各种操作状态或提示信息。
26 0

热门文章

最新文章