> 文章列表 > uniapp常用标签

uniapp常用标签

uniapp常用标签

view ~~ 视图容器

类似于传统html中的div,用于包裹各种元素内容

<view><text>hh</text>
</view>

scroll-view ~~可滚动视图区域

  • scroll-x 允许横向滚动

  • scroll-y 允许纵向滚动

  • scroll-top 设置竖向滚动条位置,可以一键回到顶部

  • refresher-enabled 开启自定义下拉刷新

swiper ~~ 滑块视图容器。

一般用于轮播图,swiper下的每个swiper-item是一个滑动切换区域,不能停留在2个滑动区域之间

  • circular 是否采用衔接滑动,即播放到末尾后重新回到开头

  • indicator-dots 是否显示面板指示点

  • autoplay 是否自动切换

  • interval 自动切换时间间隔

  • duration 滑动动画时长

  • @change current 改变时会触发 change 事件,current为当前所在滑块的 index

icon ~~ 图标

 <icon :type="value" size="26"/>

text ~~ 文本组件

<text>吃了吗?</text>

rich-text ~~ 富文本

能够渲染html跟node

button ~~ 按钮

  • type 按钮的样式类型

  • disabled 是否禁用

  • plain 按钮是否镂空,背景色透明

  • size 按钮的大小

form ~~ 表单

  • @submit 表单提交触发,并携带form数据

  • @reset 表单重置时会触发 reset 事件

picker ~~ 从底部弹起的滚动选择器

五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器

  • @change value 改变时触发 change 事件,value表示选中的数据

navigator ~~ 页面跳转

类似HTML中的<a>组件,但只能跳转本地页面。目标页面必须在pages.json中注册

  • url 应用内的跳转链接,值为相对路径或绝对路径

  • hover-class 指定点击时的样式类,当hover-class="none"时,没有点击态效果

audio ~~ 音频

微信小程序不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见 uni.createInnerAudioContext 替代

image ~~ 图片

  • src 图片资源地址

  • mode 图片裁剪、缩放的模式


空闲记录下,详情请看官网:uni-app官网 (dcloud.net.cn)