成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

解決微信小程序視頻組件層級過高的問題

HitenDev / 1069人閱讀

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

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

前言

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

問題描述

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

解決方案

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

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

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

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

接下來直接上代碼了：
首先是wxml的代碼：



  
    
        
          
          
              
              
                      
                
          
        
    
  
  
    我是遮擋層。

接著是js的代碼：

//index.js
Page({
  data: {
    curr_id: "",   //當(dāng)前打開的視頻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)建視頻上下文對象
    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é)語

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/113007.html

相關(guān)文章

  • 解決微信小程序視頻組件層級過高的問題

    摘要：本文首發(fā)于我的個人博客前言在微信小程序的開發(fā)中，總有一些組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。問題描述由于視頻組件層級過高并且無法使用進(jìn)行控制層級，導(dǎo)致許多人都無法在視頻組件之上放置一些其他的組件。 本文首發(fā)于我的個人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

    genefy 評論0 收藏0

  • 解決微信小程序視頻組件層級過高的問題

    摘要：本文首發(fā)于我的個人博客前言在微信小程序的開發(fā)中，總有一些組件，他們的層級，高得讓人抓狂，總是凌駕于很多其他低層級組件之上。問題描述由于視頻組件層級過高并且無法使用進(jìn)行控制層級，導(dǎo)致許多人都無法在視頻組件之上放置一些其他的組件。 本文首發(fā)于我的個人博客：http://www.fogcrane.org showImg(https://segmentfault.com/img/remote...

    Rocture 評論0 收藏0

  • 關(guān)于微信小程序的視頻的坑

    摘要：需求背景最新在忙一個需求，就是小程序的課程詳情的展示視頻，如下圖層級過高在小程序的官方文檔的話是有介紹的目前解決的方案使用標(biāo)簽可以覆蓋到原生組件中。 需求背景：最新在忙一個需求，就是小程序的課程詳情的展示視頻，如下圖 showImg(https://segmentfault.com/img/bVbkBlI?w=462&h=1034); video層級過高 在小程序的官方文檔的話是有介...

    yimo 評論0 收藏0

  • 微信小程序開發(fā)中遇到的問題及解決辦法（三）

    摘要：資料整理關(guān)于配置微信小程序頁面附關(guān)于微信搜索小程序內(nèi)頁面的功能，只能在線上環(huán)境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。 大綱：根據(jù)近期我在小程序開發(fā)中接到的需求，總結(jié)一下下面四個開發(fā)需求所遇到的問題： 1、關(guān)于微信現(xiàn)已開放小程序內(nèi)搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

    Lowky 評論0 收藏0

  • 微信小程序開發(fā)中遇到的問題及解決辦法（三）

    摘要：資料整理關(guān)于配置微信小程序頁面附關(guān)于微信搜索小程序內(nèi)頁面的功能，只能在線上環(huán)境有用，而且沒有提供測試的渠道。二微信小程序激勵視頻廣告接入微信視頻廣告指引截圖具體使用注意激勵視頻廣告組件是一個原生組件，層級比普通組件高。 大綱：根據(jù)近期我在小程序開發(fā)中接到的需求，總結(jié)一下下面四個開發(fā)需求所遇到的問題： 1、關(guān)于微信現(xiàn)已開放小程序內(nèi)搜索（sitemap 配置）；2、微信小程序的激勵視頻廣告...

    elina 評論0 收藏0

發(fā)表評論

0條評論

HitenDev

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<