无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
微信小程序把玩《九》:audio組件,image組件,video組件
時(shí)間:2021-02-20 09:53:52

一:audio組件

音頻播放已經(jīng)封裝的很好!只需配合屬性設(shè)置即可! (method和data配合使用)

主要屬性:

wxml

  1. <!--監(jiān)聽button點(diǎn)擊事件-->
  2. <button bindtap="listenerButton">點(diǎn)擊顯示視頻組件</button>
  3.  
  4. <!--視頻組件src資源地址,binderror為監(jiān)聽錯(cuò)誤信息-->
  5. <video
  6. src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
  7. style="width: 100%; height: 100%"
  8. hidden="{{hiddenVideo}}"
  9. binderror="listenerVideo" />

js

  1. Page({
  2. data:{
  3. // text:"這是一個(gè)頁面"
  4. hiddenVideo: true
  5. },
  6. /**
  7. * 監(jiān)聽視頻加載錯(cuò)誤狀態(tài)
  8. */
  9. listenerVideo:function(e) {
  10. console.log(e.detail.errMsg);
  11. },
  12. /**
  13. * 監(jiān)聽button點(diǎn)擊事件
  14. */
  15. listenerButton:function() {
  16. this.setData({
  17. hiddenVideo: !this.data.hiddenVideo
  18. })
  19. }
  20.  
  21. })
二:image組件

image組件也是一個(gè)程序不可缺少的,可以這樣說一個(gè)app中image組件隨處可以看到,一般 image有兩種加載方式第一種是網(wǎng)絡(luò)圖片第二種是本地圖片資源,都用src屬性去指定。

重點(diǎn)屬性:

三種縮放模式

九種剪切方式

wxml

  1. <!--3中是縮放模式
  2. scaleToFill 不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿image元素
  3. aspectFit 保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖片顯示出來。
  4. aspectFill 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來
  5.  
  6. -->
  7. <view>aspectFit 保持縱橫比縮放圖片,只保證圖片的短邊能完全顯示出來</view>
  8. <image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/>
  9.  
  10. <!--9種是裁剪模式
  11. top 不縮放圖片,只顯示圖片的頂部區(qū)域
  12. bottom,同上
  13. left
  14. right
  15. top right
  16. top left
  17. bottom right
  18. bottom left
  19. -->
  20. <view>bottom 不縮放圖片,只顯示圖片的底部區(qū)域</view>
  21. <image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/>
  22.  
  23. <view>left 不縮放圖片,只顯示圖片的左邊區(qū)域</view>
  24. <image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/>
  25.  
  26. <view>top right 不縮放圖片,只顯示圖片的右上邊區(qū)域</view>
  27. <image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>
三:video組件

視頻播放組件與圖片加載組件也沒啥差別,使用起來也沒啥注意的

重要屬性:

wxml

  1. <!--監(jiān)聽button點(diǎn)擊事件-->
  2. <button bindtap="listenerButton">點(diǎn)擊顯示視頻組件</button>
  3.  
  4. <!--視頻組件src資源地址,binderror為監(jiān)聽錯(cuò)誤信息-->
  5. <video
  6. src="http://mvvideo1.meitudata.com/575c2b652d7375255.mp4"
  7. style="width: 100%; height: 100%"
  8. hidden="{{hiddenVideo}}"
  9. binderror="listenerVideo" />

js

  1. Page({
  2. data:{
  3. // text:"這是一個(gè)頁面"
  4. hiddenVideo: true
  5. },
  6. /**
  7. * 監(jiān)聽視頻加載錯(cuò)誤狀態(tài)
  8. */
  9. listenerVideo:function(e) {
  10. console.log(e.detail.errMsg);
  11. },
  12. /**
  13. * 監(jiān)聽button點(diǎn)擊事件
  14. */
  15. listenerButton:function() {
  16. this.setData({
  17. hiddenVideo: !this.data.hiddenVideo
  18. })
  19. }
  20.  
  21. })
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358