uni-app 组件
组件:组件时视图层的基本组成单元
<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 组件的更多相关文章
- Android App组件之ListFragment -- 说明和示例
Android App组件之ListFragment -- 说明和示例 1 ListFragement介绍 ListFragment继承于Fragment.因此它具有Fragment的特性,能够作为a ...
- App 组件化/模块化之路——构建开发架构思路
App 组件化/模块化开发架构思路 随着业务的发展 App 开发技术也越来越成熟,对开发者来说 App 代码量也迅速地增长到一个数量级.对于如何架构 App 已经每个开发者面临的实际问题.好的架构可以 ...
- App 组件化/模块化之路——如何封装网络请求框架
App 组件化/模块化之路——如何封装网络请求框架 在 App 开发中网络请求是每个开发者必备的开发库,也出现了许多优秀开源的网络请求库.例如 okhttp retrofit android-asyn ...
- App 组件化/模块化之路——Android 框架组件(Android Architecture Components)使用指南
面对越来越复杂的 App 需求,Google 官方发布了Android 框架组件库(Android Architecture Components ).为开发者更好的开发 App 提供了非常好的样本. ...
- App 组件化/模块化之路——使用SDK的思路进行模块化设计接口
在不久之前分享一篇<App 组件化/模块化之路——如何封装网络请求框架>文章介绍了我在项目中封装网络请求框架的思路.开发一个 App 会涉及到很多网络请求 API ,例如登录注册接口.用户 ...
- Android App组件之Fragment说明和示例
Android App组件之Fragment说明和示例 1 Fragement介绍 Android从3.0开始引入Fragment,主要是为了支持更动态更灵活的界面设计. Fragment是activ ...
- Android App组件之Activity
Android App组件之Activity 1 activit介绍 Activities 是Android的四大组件之一,其余三大组件是service.broadcast和content provi ...
- Android App组件之ListFragment -- 说明和示例(转载)
转自:http://www.cnblogs.com/skywang12345/p/3160260.html 1 ListFragement介绍 ListFragment继承于Fragment.因此它具 ...
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- 得到、微信、美团、爱奇艺APP组件化架构实践
一.背景 随着项目逐渐扩展,业务功能越来越多,代码量越来越多,开发人员数量也越来越多.此过程中,你是否有过以下烦恼? 项目模块多且复杂,编译一次要5分钟甚至10分钟?太慢不能忍? 改了一行代码 或只调 ...
随机推荐
- C# ThreadStart中如何带参数
1.ThreadStart 线程执行带参数的方法,new Thread(new ThreadStart(delegate { ThreadTask(firstPage, lastPage); })); ...
- js-beautify 不换行
最近在用Hbuilder-X,自带js-beautify.但是默认格式化设置实在是看着太难受.来看看一个VX的格式化,参数愣是给用了三行才格式化完,而且两个参数还分开了,看着太难受. // mutat ...
- BZOJ3209: 花神的数论题(数位DP)
题目: 3209: 花神的数论题 解析: 二进制的数位DP 因为\([1,n]\)中每一个数对应的二进制数是唯一的,我们枚举\(1\)的个数\(k\),计算有多少个数的二进制中有\(k\)个\(1\) ...
- Java自学-接口与继承 默认方法
默认方法 步骤 1 : 什么是默认方法 默认方法是JDK8新特性,指的是接口也可以提供具体方法了,而不像以前,只能提供抽象方法 Mortal 这个接口,增加了一个默认方法 revive,这个方法有实现 ...
- 为元素添加 title 属性
---恢复内容开始--- 可以使用title属性(不要与title元素混淆)为网站上任何部分加上提示标签. ... <ul title="Table of Contents" ...
- JavaScript 之 String 对象
String 对象 之前学习的是 基本数据类型 String 类型,现在讨论的是 String对象(包装类型). String的特点:字符串的不可变性. var str = 'abc'; str = ...
- Jnetpcap简述
Jnetpcap简述 最近需要做一个本地网络流量分析的项目,基于 Java 语言,上网查了很多资料,最后利用 Jnetpcap 实现了,这里做个记录. 这里先列一下我用到的工具以及版本: Eclips ...
- kbmmw 5.10.10 发布
这个版本主要是bug修正. New stuff ========= - Added OnException event property to TkbmMWSchedu ...
- Mac 编译报错 symbol(s) not found for
查看静态库文件支持的arm64指令集架构的方法 root# lipo -info libname.a Architectures in the fat file: libname.a are: arm ...
- prometheus学习系列十: Prometheus AlertManager配置文件说明
alertmanager配置文件说明 alertmanager是通过命令行标记和配置文件配置的,命令行标记配置不可变的系统参数,配置文件定义抑制规则.通知路由和通知接收器.可以通过官方提供的routi ...