解決微信小程序視頻組件層級(jí)過(guò)高的問(wèn)題

HitenDev 發(fā)布于2019-08-29 14:14 / 1044人閱讀

摘要：本文首發(fā)于我的個(gè)人博客前言在微信小程序的開(kāi)發(fā)中，總有一些組件，他們的層級(jí)，高得讓人抓狂，總是凌駕于很多其他低層級(jí)組件之上。問(wèn)題描述由于視頻組件層級(jí)過(guò)高并且無(wú)法使用進(jìn)行控制層級(jí)，導(dǎo)致許多人都無(wú)法在視頻組件之上放置一些其他的組件。

本文首發(fā)于我的個(gè)人博客：http://www.fogcrane.org

前言

在微信小程序的開(kāi)發(fā)中，總有一些“VIP”組件，他們的層級(jí)，高得讓人抓狂，總是凌駕于很多其他低層級(jí)組件之上。
諸如：video組件、map組件、canvas組件等。現(xiàn)在就讓我來(lái)講講如何巧妙的解決掉這個(gè)問(wèn)題。

問(wèn)題描述

由于視頻組件層級(jí)過(guò)高并且無(wú)法使用z-index進(jìn)行控制層級(jí)，導(dǎo)致許多人都無(wú)法在視頻組件之上放置一些其他的組件。
為此，一些漂亮的視頻設(shè)計(jì)往往還沒(méi)開(kāi)始就宣告了結(jié)束。上一張官方文檔的相關(guān)說(shuō)明：

解決方案

解決思路其實(shí)也挺簡(jiǎn)單的。今天就暫且不宣揚(yáng)愚公移山的精神了，我們今天選擇繞過(guò)眼前的大山。既然視頻層級(jí)很高
很高，并且我們不能降低視頻層級(jí)或者提升其他組件層級(jí)已覆蓋視頻組件。那么我們就選擇只在恰當(dāng)?shù)臅r(shí)候才讓視頻
組件出現(xiàn)在我們的頁(yè)面中。那么問(wèn)題就顯得簡(jiǎn)單起來(lái)了。思路大致如下：

在渲染頁(yè)面的時(shí)候，使用假視頻來(lái)代替視頻組件，換言之就是使用視頻封面充當(dāng)一個(gè)視頻組件。

當(dāng)用戶點(diǎn)擊視頻封面時(shí)，進(jìn)行兩步操作，第一，隱藏視頻封面；第二，播放視頻。

當(dāng)存在同一頁(yè)面多視頻的時(shí)候，需要進(jìn)行視頻切換的處理。

接下來(lái)直接上代碼了：
首先是wxml的代碼：

接著是js的代碼：

//index.js
Page({
  data: {
    curr_id: "",   //當(dāng)前打開(kāi)的視頻id
    items: [
      {
        id: 1, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      }, {
        id: 2, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 3, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
      {
        id: 4, src: "https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400", poster: "http://ow74m25lk.bkt.clouddn.com/shilan.jpg"
      },
    ],
  },
  onReady: function () {  //創(chuàng)建視頻上下文對(duì)象
    this.videoContext = wx.createVideoContext("myVideo")
  },
  videoPlay(e) {
    this.setData({
      curr_id: e.currentTarget.dataset.id,
    })
    this.videoContext.play()
  }
})

最后是css的代碼：

/*index.wxss*/
.video{
    margin-bottom: 40rpx;
    position: relative;
}
.model-img{
    width: 100%;
    height: 420rpx;
}
.model-btn{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    margin:auto;
    width:100rpx;
    height:100rpx;
    border-radius:50%;
    background-color: rgba(0,0,0,.3);
}
.play-icon{
    margin:28rpx 42rpx;
    border-top:26rpx solid transparent;
    border-left:36rpx solid #fff;
    border-bottom:22rpx solid transparent;
}
.text{
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: red;
  color: #fff;
  position: fixed;
  bottom: 0;
}

以上，就是全部代碼了，附上運(yùn)行結(jié)果圖：

代碼下載

自定義視頻組件代碼，密碼為30s3

結(jié)語(yǔ)

好看的皮囊千篇一律，有趣的靈魂萬(wàn)里挑一。祝各位都是有趣的程序媛/猿。嗨起來(lái)?(?????)?