【微信小程序】常用组件基本使用(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


相关文章
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
974 1
微信小程序:轻松实现时间轴组件
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
440 0
在线课堂+工具组件小程序uniapp移动端源码
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
3135 1
|
小程序 搜索推荐 API
微信小程序:自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改,但产品经理的需求却需要个性化的定制。在这种情况下,我们需要寻找解决方案,以满足这些特殊需求,尽管这可能有点棘手。
1276 0
微信小程序:自定义关注公众号组件样式
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
9月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
2470 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
10月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
540 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
4349 7
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
5018 1