组件:组件时视图层的基本组成单元

<template>
<view>
<tagname property = "value">
content
</tagname>
</view>
</template>

viewscroll-viewswipertextrich-textprogress

buttoncheckboxforminputlabelpickerradiosliderswitchtextarea

navigator、open-type String navigate 跳转方式

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

hover-stop-propagation Boolean false指定是否阻止本节点的祖先节点出现点击态

hover-start-time Number 50按住后多久出现点击态,单位毫秒

hover-stay-time Number 600手指松开后点击态保留时间,单位毫秒

navigate 对应 uni.navigateTo 的功能

redirect 对应 uni.redirectTo 的功能

switchTab 对应 uni.switchTab 的功能

reLaunch 对应 uni.reLaunch 的功能 微信小程序

navigateBack 对应 uni.navigateBack 的功能 微信小程序

<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
export default {
data() {
return {
title: 'navigator'
}
},
methods: {
}
}

页面传值

<template>
<view>
<view class="page-body">
<view class="btn-area">
<navigator url="./test?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
</view>
</view>
</view>
</template>
<script>
export default {
data:{},
onLoad:function(options){
console.log(options);
console.log(options.title);
}
}
</script>
缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变
裁剪 top 不缩放图片,只显示图片的顶部区域
裁剪 bottom 不缩放图片,只显示图片的底部区域
裁剪 center 不缩放图片,只显示图片的中间区域
裁剪 left 不缩放图片,只显示图片的左边区域
裁剪 right 不缩放图片,只显示图片的右边区域
裁剪 top left 不缩放图片,只显示图片的左上边区域
裁剪 top right 不缩放图片,只显示图片的右上边区域
裁剪 bottom left 不缩放图片,只显示图片的左下边区域
裁剪 bottom right 不缩放图片,只显示图片的右下边区域

audio 音频

id String  audio 组件的唯一标识符
src String 要播放音频的资源地址
loop Boolean false 是否循环播放
controls Boolean false 是否显示默认控件
poster String 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效
name String 未知音频 默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效
author String 未知作者 默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效
binderror EventHandle 当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}
bindplay EventHandle 当开始/继续播放时触发play事件
bindpause EventHandle 当暂停播放时触发 pause 事件
bindtimeupdate EventHandle 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}
bindended EventHandle 当播放到末尾时触发 ended 事件
MediaError.code

代码:

<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap" style="text-align: center;">
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view>
</view>
</view>
</template>
export default {
data() {
return {
title: 'audio',
current: {
poster: 'https://',
name: '',
author: '',
src: 'https://',
},
audioAction: {
method: 'pause'
}
}
}
}

map 地图

longitude Number  中心经度
latitude Number 中心纬度
scale Number 16 缩放级别,取值范围为5-18
markers Array 标记点
covers Array 即将移除,请使用 markers
polyline Array 路线
circles Array 圆
controls Array 控件
include-points Array 缩放视野以包含所有给定的坐标点
show-location Boolean 显示带有方向的当前定位点
@markertap EventHandle 点击标记点时触发
@callouttap EventHandle 点击标记点对应的气泡时触发 微信小程序、5 App
@controltap EventHandle 点击控件时触发
@regionchange EventHandle 视野发生变化时触发
@tap EventHandle 点击地图时触发
@updated EventHandle 在地图渲染更新完成时触发 微信小程序
<template>
<view>
<view class="page-body">
<view class="page-section page-section-gap">
<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
</map>
</view>
</view>
</view>
</template>
export default {
data() {
return {
title: ' ',
latitude: ,
longitude: ,
markers: [{
width : 40,
height: 40,
latitude: ,
longitude: ,
iconPath: ' '
}]
}
},
methods: {
}
}
</script>

若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达达的简书!

这是一个有质量,有态度的博客

uni-app 组件的更多相关文章

  1. Android App组件之ListFragment -- 说明和示例

    Android App组件之ListFragment -- 说明和示例 1 ListFragement介绍 ListFragment继承于Fragment.因此它具有Fragment的特性,能够作为a ...

  2. App 组件化/模块化之路——构建开发架构思路

    App 组件化/模块化开发架构思路 随着业务的发展 App 开发技术也越来越成熟,对开发者来说 App 代码量也迅速地增长到一个数量级.对于如何架构 App 已经每个开发者面临的实际问题.好的架构可以 ...

  3. App 组件化/模块化之路——如何封装网络请求框架

    App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...

  4. App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南

    面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本. ...

  5. App 组件化/模块化之路——使用SDK的思路进行模块化设计接口

    在不久之前分享一篇<App 组件化/模块化之路——如何封装网络请求框架>文章介绍了我在项目中封装网络请求框架的思路.开发一个 App 会涉及到很多网络请求 API ,例如登录注册接口.用户 ...

  6. Android App组件之Fragment说明和示例

    Android App组件之Fragment说明和示例 1 Fragement介绍 Android从3.0开始引入Fragment,主要是为了支持更动态更灵活的界面设计. Fragment是activ ...

  7. Android App组件之Activity

    Android App组件之Activity 1 activit介绍 Activities 是Android的四大组件之一,其余三大组件是service.broadcast和content provi ...

  8. Android App组件之ListFragment -- 说明和示例(转载)

    转自:http://www.cnblogs.com/skywang12345/p/3160260.html 1 ListFragement介绍 ListFragment继承于Fragment.因此它具 ...

  9. uni app中使用自定义图标库

    项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...

  10. 得到、微信、美团、爱奇艺APP组件化架构实践

    一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...

随机推荐

  1. Visual Studio的语法着色终于调得赏心悦目

    代码可读性瞬间大大提升.Reshaper真的强大.

  2. ASP.NET MVC 允许跨域请求设置

    场景:创建一个图片上传的站点,用于其他站点跨域上传附件和图片之类. 上传插件结合百度的 webuploader.js 经常会碰到,跨域的问题,如下, 处理方式呢,是在web.config 中配置允许跨 ...

  3. 2019-08-01 Ajax实现从数据库读取表

    php代码 <?php //用pdo连接数据库 $dsn = 'mysql:host=127.0.0.1;port=3306;charset=utf8;dbname=news'; //实例化PD ...

  4. 记录下hbuilder vue项目打包APP 在IOS上点击延迟的问题

    做的项目打包成APP在IOS 上有延迟问题,在安卓下却不会,联想到之前 用IONIC时打包的APP也是 在IOS下有300毫秒延迟问题.所以 只能 认吧. 安装fastclick 插件: npm in ...

  5. const关键字总结

    在C语言中 const是C语言中总结 1.修饰的变量,使其具有常属性,使变量的值不能直接被改变.但是可以通过指针来间接的修改变量的值. 2.便于进行类型检查(在编译时进行类型检查),使编译对处理内容有 ...

  6. Servlet 入门

    静态web页面:html+css+js,页面是静态的.不变的,显示给每个用户的页面都一样. 动态web页面:php.jsp.asp,根据用户.实时数据(数据库)来动态显示页面,不同的用户,显示的页面可 ...

  7. 关于升级.NetCore3.1启动运行项目之后无法运行之前版本的错误解决方案

    昨天在跟上微软的进度,更新VS版本升级.netcore3.1 之后成功运行之后发现,我无法运行之前版本的问题 都是报这种问题: 还有打开解决方案所有的项目都无法正常加载,都是"已卸载&quo ...

  8. RabbitMQ基本概念(一)-RabbitMQ的优劣势及产生背景

    本篇并没有直接讲到技术,例如没有先写个Helloword.我想在选择了解或者学习一门技术之前先要明白为什么要现在这个技术而不是其他的,以免到最后发现自己学错了.同时如果已经确定就是他,最好先要了解下技 ...

  9. linux系统IO操作

    本文重点说明下面内容: 什么是标准IO,什么是文件IO? 什么是Direct IO? O_SYNC标识有什么意义? 各个层面的缓存如何同步? 还在page cache中的脏页可以读写吗? IO路径上的 ...

  10. 熟练掌握GitHub及Git的使用方法

    一.Git 命令的理解和使用 Git是一个快速,可扩展的分布式版本控制系统,具有异常丰富的命令集,可提供高级操作和对内部的完全访问. 分布式:Git版本控制系统是一个分布式的系统,是用来保存工程源代码 ...