微信小程序教程之微信組件cover-view

微信小程序教程之微信組件cover-view

微信小程序提供了很多有用的組件,今天開發項目的時候使用到了視頻,需要自己寫一些東西原本在我的印象中video組件是原生組件沒辦法使用wxml定位到它之上,所以就犯難了,結果看到人家的東西居然可以,所以歐文在仔細的看了一遍組件和api,突然發現原來有支持覆蓋到原生組件之上的組件,啊,這一刻真實天助我也啊,下面就一起來看看這個組件到底如何使用,廢話不多說還是用一個例子來解說。

微信小程序教程之微信組件cover-view

一、播放視頻代碼

微信小程序教程之微信組件cover-view

二、看看官方文檔介紹

微信小程序教程之微信組件cover-view

微信小程序教程之微信組件cover-view

微信小程序教程之微信組件cover-view

大家可以看看bug和提示到時不少,所以使用的時候要注意。

三、實踐

我們在視頻中添加自定義的按鈕功能。結構如下:

微信小程序教程之微信組件cover-view

事件定義如下:

微信小程序教程之微信組件cover-view

效果如下:

微信小程序教程之微信組件cover-view

四、總結

這裡只是一個簡單的例子,其實會發現這種類似需求還是很多的,比如需要使用地圖來完成某些功能時,這裡的視頻就不用說了,還有canvas和相機等。目前我這裡例子還是簡單的,如果大家要求較高,可以看看官方的例子如下:

微信小程序教程之微信組件cover-view

微信小程序教程之微信組件cover-view

微信小程序教程之微信組件cover-view

官方的這個例子就是給視頻添加自定義的播放暫停和時間顯示。

微信小程序教程之微信組件cover-view


分享到:


相關文章: