uniapp多媒体组件及配置项_!L的博客-程序员宅基地

一.audio音频

<view>
	<audio :src="audioSrc" controls></audio>
</view>
data:function() {
	return {
		audioSrc:"https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3"
	}
}

常用属性:

  • src 播放地址
  • loop 是否循环播放 默认值false
  • controls 是否显示默认控件 默认值false

二.image图片

<view>
	<image src="/static/img/shuijiao.jpg" style="width:50%;" mode="widthFix"></image>
</view>

常用属性:mode 图片裁剪、缩放的模式

mode有效值:4种缩放模式,9种裁剪模式
缩放:
scaleToFill 默认值,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素;
widthFix宽度不变,高度自动变化,保持原图宽高比不变

裁剪:
top不缩放图片,只显示图片的顶部区域
left不缩放图片,只显示图片的左边区域
top left不缩放图片,只显示图片的左上边区域

注:①<image> 组件默认宽度 300px、高度 225px;
②使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,设置 image{will-change: transform} ,可优化此问题

三.video视频

<video id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%[email protected]" @error="videoErrorCallback" controls></video>

常用属性:

  • autoplay 是否自动播放 默认值false
  • loop 是否循环播放 默认值false
  • controls 是否显示默认播放控件(播放/暂停按钮、播放进度、时间)默认值true

注:<video> 默认宽度 300px、高度 225px,可通过 css 设置宽高

四.配置

1.pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。

(1)pages.json中的tabBar
可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页

①tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序
②tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad
③代码跳转到tabbar页面,api只能使用uni.switchTab,不能使用uni.navigateTo、uni.redirectTo;使用navigator组件跳转时必须设置open-type="switchTab"

(2)pages.json中的globalStyle

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8",
}
  • navigationBarTextStyle:导航栏文字的样式
  • navigationBarTitleText:导航栏文字
  • navigationBarBackgroundColor:导航栏的背景颜色
  • backgroundColor:整个页面的背景颜色

2.manifest.json 文件是应用的配置文件,用于指定应用的名称、图标、权限等
3.package.json文件中增加uni-app扩展节点,可实现自定义条件编译平台
4.vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载
5.uni.scss文件是为了方便整体控制应用的风格。比如按钮颜色、边框风格
6.App.vue是uni-app的主组件,所有页面都是在App.vue下进行切换的,是页面入口文件。
7.main.js是uni-app的入口文件,主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46314560/article/details/104835373

智能推荐

android录制amr音频文件,android – 以AMR文件格式录制音频_weixin_39923137的博客-程序员宅基地

我想以AMR文件格式录制音频.我目前正在使用波纹管代码来录制音频:outputFile = Environment.getExternalStorageDirectory().getAbsolutePath() + "Sample.3gp";myRecorder = new MediaRecorder();myRecorder.setAudioSource(MediaRecorder.AudioS...

SAP License:SAP学习心得_SAP权限管控的博客-程序员宅基地

1、组织架构–用途:责任、统计、数据分类、数据关联、关键字。2、SAP应用技巧–功能/元素对应业务项/ 点,预提升业务则需启用功能或补录数据项。3、SAP系统概念业务释义手册,业务单据关键字段清单及描述。4、系统可以多项集成,形成多个口径,提供多维管理视图,但统计口经必须选其一、必须唯一一致;如成本中心可与设备位置之工作中心集成,也可与设备组织结构之成本中心。5、SAP是飞机、一般企业能玩得转、用的上么;需要的是顾问的艺术、管理者的决心。6、主数据及业务表单各数据字段业务含义及系统作用影响描述;.

java 崩溃日志,minecraft崩溃日志_发条粽子的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼可以帮我看看吗-- Head --Thread: Client threadStacktrace:at java.lang.Class.forName0(Native Method)at java.lang.Class.forName(Unknown Source)at net.minecraftforge.fml.common.FMLModContai...

BigDecimal除法保留小数位_兴趣使然的小小的博客-程序员宅基地_bigdecimal除法保留小数点

BigDecimal num1 = new BigDecimal(100);BigDecimal num2 = new BigDecimal(32);System.out.print(num1.divide(num2, 2, RoundingMode.HALF_UP));RoundingMode.DOWN 直接删除多余的小数位,如2.35会变成2.3RoundingMode.UP 进位处理,2.35变成2.4RoundingMode.HALF_UP 四舍五入,2.35变成2.4Rounding

NotePad++ 语法高亮 INC 文件_weixin_33947521的博客-程序员宅基地

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

C++含变量的后缀表达式计算__程序设计_的博客-程序员宅基地

C++含变量的后缀表达式计算接了个老外的作业,要求是在原代码基础上添加支持变量的后缀表达式的计算,题目要求如下:Make the Reverse Polish Notation calculator work with variablesIf the input is2 3 4 +* -&gt; a =that means work out 2*( 3+4) and remember that as the value of a.-&gt; needs to be handled special

随便推点

Ruby Web实时消息后台服务器推送技术---GoEasy_weixin_34221773的博客-程序员宅基地

越来越多的项目需要用到实时消息的推送与接收,怎样用Ruby实现最方便呢?我这里推荐大家使用GoEasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!浏览器兼容性:GoEasy推送 支持websocket 和polling两种连接方式,从而可以支持IE6及其以上的所有版本,同时还支持其它浏览器诸如Firefox, Chrome, Safari等等。支持不同的开发语言:...

JVM内存管理和JVM垃圾回收机制_完美灬缺陷的博客-程序员宅基地

你对JVM内存组成结构和JVM垃圾回收机制是否熟悉,这里和大家简单分享一下,希望对你的学习有所帮助,首先来看一下JVM内存结构,它是由堆、栈、本地方法栈、方法区等部分组成,结构图如下所示。JVM学习笔记 JVM内存管理和JVM垃圾回收JVM内存组成结构JVM内存结构由堆、栈、本地方法栈、方法区等部分组成,结构图如下所示: 1)堆所有通过new

sratookit_weixin_30580341的博客-程序员宅基地

sratookit下载后解压tar -zxvf sratoolkit.2.8.2-1-ubuntu64.tar.gz移动到专门安装生物信息软件的目录下mv sratoolkit.2.8.2-1-ubuntu64 ~/biosoft加入环境变量echo 'PATH=$PATH:~/biosoft/sratoolkit.2.8.2-1-ubuntu64/bin' &g...

孕妇应该怎么吃?_weixin_30654583的博客-程序员宅基地

特别推荐:孕中期作好营养补充 孕期营养过剩对母婴都不好PART1 三阶段补充营养原则孕早期大多数孕妇在孕早期会出现恶心、呕吐、食欲不振等妊娠反应,吃什么都不香,这种状况下,营养的摄入怎样能得以保证呢?处于孕早期的准妈妈大多受妊娠反应困扰,胃口不佳,这个阶段,准妈妈并不用刻意让自己多吃些什么,与其每天对着鸡鸭鱼肉发愁,不如多选择自己喜欢的食物,以增进食欲。对于...

ROS melodic安装过程中的用手机热点更好~_weixin_30633507的博客-程序员宅基地

这几天终于发现了纠结了好久的问题,包括之前的PCL的安装,有的时候某些包下载不全的原因是网络的问题。这次使用了手机热点,由于当前使用的华为P20 pro,在服务器里面选择了huaweicloud的服务器,然后安装ROS的过程特别顺利,简直一路绿灯,在这里MARK下。转载于:https://www.cnblogs.com/robohou/p/11421453.html...

推荐文章

热门文章

相关标签