应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序把玩《九》:audio组件,image组件,video组件

发布时间:2024-01-01 00:00 浏览次数:38

一:audio组件


音频播出已经PCB的较好!只需协调属性设置即可! (method和data协调采用)


主要属性:



 



src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"


hidden="{{hiddenVideo}}"


binderror="listenerVideo" />


js


// text:"这就是一个页面"


listenerVideo:function(e) {


console.log(e.detail.errMsg);


listenerButton:function() {


this.setData({


hiddenVideo: !this.data.hiddenVideo


 


二:image组件


image组件也就是一个程序不可缺少的,可以这样说道一个app中image组件随处可以看见,通常 image存有两种读取方式第一种就是网络图片第二种就是本地图片资源,都用src属性回去选定。


重点属性:


三种翻转模式


九种剪切方式


scaleToFill 不维持四海比翻转图片,并使图片的收录机全然弯曲至清空image元素


aspectFit 维持四海比翻转图片,并使图片的长边能够全然表明出。也就是说,可以完备地将图片表明出。


aspectFill 维持四海比翻转图片,只确保图片的短边能全然表明出


 


aspectFit 维持四海比翻转图片,只确保图片的短边能全然表明出



 


top 不翻转图片,只表明图片的顶部区域


bottom,同上


top right


top left


bottom right


bottom left


bottom 不翻转图片,只表明图片的底部区域



 


left 不翻转图片,只表明图片的左边区域



 


top right 不翻转图片,只表明图片的右上边区域



三:video组件


视频播出组件与图片读取组件也没啥差别,采用出来也没啥特别注意的


关键属性:




 



src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"


style="width: 100%; height: 100%"


hidden="{{hiddenVideo}}"


binderror="listenerVideo" />


// text:"这就是一个页面"


hiddenVideo: true


* 监听视频读取错误状态


listenerVideo:function(e) {


console.log(e.detail.errMsg);


* 监听button页面事件


listenerButton:function() {


this.setData({


hiddenVideo: !this.data.hiddenVideo


 

TAG标签:
阅读推荐