uni-app UI 框架 uView 1.2.x 组件教程

本文档使用 书栈网 · BookStack.CN 构建 - -Avatar 头像Avatar 头像本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。平台差异说明AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√通过 src 指定头像的路径即可简单使用，如果传递了通过 src 指定头像的路径即可简单使用，如果传递了 text 参数， text 将会优先起作用注意： 请保证传递给 src 的是绝对地址，而不是相对地址，为什么呢？因为传入 avatar 组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。1.<>template2.<u-avatar:src="src"/u-avatar>><3.4.u-avatar<:text="text"></u-avatar>5./template<>6.7.script><8.export default {9.data() {10.return {11.src: '/Files/pic/pic9/202002/hpic2119_s.jpg',12.text: '无头像'13.}14.}15.}16.</script>头像类型 mode 参数指定头像的类型，取值 circle 为圆形，取值 square 为圆角方形1.<template>2.<u-avatar:src="src" mode="square"></u-avatar>3.</template>4.5.<script>6.export default {7.data() {8.return {9.src: '/Files/pic/pic9/202002/hpic2119_s.jpg'10.}Avatar 头像1111.}12.}13.</script>默认头像如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像APIProps参数说明类型默认值可选值bgcolor背景颜色，一般显示文字时用String#ffffff-src头像路径，如加载失败，将会显示默认头像String--size头像尺寸，可以为指定字符串(large, default,mini)，或者数值，单位rpxString|Numberdefault-mode显示类型，见上方说明Stringcirclesquaretext用文字替代图片，级别优先于 src String--imgmode头像图片的裁剪类型，与uni的 image 组件的 mode 参数一致，如效果达不到需求，可尝试传 widthFix 值StringaspectFill-index用户传递的标识符值，如果是列表循环，可穿 vfor 的 index 值String--Event事件名说明回调参数click头像被点击index: 用户传递的标识符Loading 加载动画Loading 加载动画此组件为一个小动画，目前用在uView的loadmore加载更多和switch开关等组件的正在加载状态场景。平台差异说明AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序√√√√√√√基本使用通过通过 mode 设定动画的类型， circle 为圆圈的形状， flower 为经典类似花朵的形状1.<template>2.<view>3.<u-loading mode="circle"></u-loading>4.<u-loading mode="flower"></u-loading>5.</view>6.</template>动画颜色 color 可以指定动画活动区域的颜色1.<u-loading color="red"></u-loading>动画尺寸通过通过 size 设定尺寸，单位rpx，组件内把 size 值体现为组件的宽和高1.<u-loading size="36"></u-loading>显示或隐藏动画通过通过 show 设置为 true 或 false ，来显示或隐藏动画1.<u-loading:show="true"></u-loading>2.3./*等价于*/4.<u-loading show></u-loading>APILoading 加载动画Props参数说明类型默认值可选值mode模式选择，见上方说明Stringcircleflowercolor动画活动区域的颜色，