🐚作者简介:苏凉(专注于网络爬虫,数据分析,正在学习前端的路上) 🐳博客主页:苏凉.py的博客 🌐系列专栏:小程序开发基础教程 👑名言警句:海阔凭鱼跃,天高任鸟飞。 📰要是觉得博主文章写的不错的话,还望大家三连支持一下呀!!! 👉关注?点赞👍收藏📂
文章目录 常用的视图容器类组件viewscroll-view(滚动)swiper和swiper-item(轮播图) 常用的基础内容组件textrich-text 其他常用组件button三种按钮样式小按钮(mini)镂空按钮(plain) imageimage的mode属性 常用的视图容器类组件 view普通视图区域,类似于HTML中的div,是一个块级元素常用来实现页面的布局效果。
WXML代码: WXSS代码: 实现效果:
Flex布局传送门:【小程序】&【web前端】必备-Flex布局详解(弹性盒子)
scroll-view(滚动)可滚动的视图区域,常用来实现滚动列表效果。 添加属性 scroll-y,即为纵向滚动。scroll-x,即为横向滚动。
WXML代码: WXSS代码: 实现效果:
swiper和swiper-item(轮播图)轮播图容器组件,轮播图item组件
swiper组件的常用属性
WXML代码:
WXSS代码: 实现效果:
常用的基础内容组件 text文本组件,类似于HTML中的span标签,是一个行内元素。 使用text组件并添加selectable属性可以实现长按选中的效果。 WXML代码: 实现效果:
rich-text富文本组件,支持把HTML字符串渲染为WXML结构。 通过rich-text组件的nodes属性节点,把 HTML字符串渲染为对应的UI结构。 WXML代码: 实现效果:
其他常用组件 button按钮组件,功能比HTML中的button按钮丰富,通过open-type属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
三种按钮样式普通按钮/主色调按钮/警告按钮,默认自动换行 样式:
小按钮(mini)设置size="mini"即可,设置之后不换行 样式:
镂空按钮(plain)去除背景色。添加plain属性即可。 样式:
image图片组件,image 组件默认宽度约300px、高度约240px 通过src属性添加图片地址:
image的mode属性下面我们来看看效果:
scaleToFill aspectFill aspectFit widthFixheightFix到这里我们在小程序中常用的基础组件就介绍完了,欢迎订阅本专栏,持续更新中…
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #微信小程序常用组件学习