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


相关文章
|
2天前
|
小程序 JavaScript
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
【微信小程序】之轮播图、swiper、swiper-item、banner组件使用
|
2天前
|
存储 小程序 JavaScript
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
|
2天前
|
JSON 小程序 数据格式
【微信小程序】-- 自定义组件总结 (四十)
【微信小程序】-- 自定义组件总结 (四十)
|
2天前
|
小程序 JavaScript
【微信小程序】-- 自定义组件 - behaviors(三十九)
【微信小程序】-- 自定义组件 - behaviors(三十九)
|
2天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
【微信小程序】-- 自定义组件 - 组件所在页面的生命周期 & 插槽(三十七)
|
2天前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
2天前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
2天前
|
小程序 JavaScript
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
【微信小程序】之自定义四宫格(不用mp-grids扩展组件实现,这个组件太难用了)
|
2天前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
2天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。

热门文章

最新文章