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

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

常用的视图容器类组件


view


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


WXML代码:



WXSS代码:



实现效果:



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


scroll-view(滚动)


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


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


WXML代码:



WXSS代码:



实现效果:



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



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属性


mode值 说明
scaleToFill (默认值)缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变


下面我们来看看效果:


  1. scaleToFill



  1. aspectFill



  1. aspectFit



  1. widthFix



  1. heightFix


目录
相关文章
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
90 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
小程序 数据可视化 JavaScript
微信小程序:轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点,帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能,并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法,以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
138 1
微信小程序:轻松实现时间轴组件
|
4月前
|
小程序
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
微信小程序动态tabBar实现:基于自定义组件,灵活支持不同用户角色与超过5个tab自由组合(更新版)
900 1
|
1月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
34 0
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
614 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
100 0
微信小程序更新提醒uniapp
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
160 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
6月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
161 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
6月前
|
存储 小程序 JavaScript
|
7月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
94 7

热门文章

最新文章