前言：最近忙着趕項目，沒時間更博；希望和大家一起學習一起進步。
本人遇到的坑，以及爬出坑的方法：在某個微信小程序項目中，有這樣一個需求：在滑塊swiper組件和swiper-item組件中嵌套video，然后自定義一個播放的按鈕替換默認的播放按鈕和位置（我開始用的方法是用相對定位，把圖片直接定位在視頻的中央地方，問題就出現了，由於文檔已經給了提示，最好不要在滑塊swiper組件和swiper-item組件中嵌套video，所以，最后導致，第一個滑塊可以正常看到播放按鈕，其他的則不行，會隨着滑塊滑動而隱藏其他的播放按鈕（因為微信小程序video的z-idnex是最高級的），后來度娘說用組件cover-view或cover-image組件可以實現覆蓋在video，上，果然，顯示是可以了，但是，播放按鈕的位置漂浮不定，根本不能滿足需求；后來靈感一來，發現，把video組件和image組件放在兩個view組件里，用相對定位，然后把video的z-index設置為-1；image的z-index大於1就行，然后就解決了。實現滑塊滑動，播放按鈕穩穩的跟着視頻滑動）
wxml代碼：（主要看結構）
<swiper >
<swiper-item wx:for="{{antHomeData}}" wx:key="" class="swiper-cnt">
<view class="video-cnt">
<video src="{{item.adUrl}}"></video>
</view>
<image class="play-btn" src="/images/bf.png"></image>
</swiper-item>
</swiper>
wxss代碼：
.swiper-cnt {
display: flex;
flex-direction: column;
width:664rpx;
margin-left:40rpx;
position: relative;
}
.video-cnt {
position: absolute;
top:0;
left: 0;
z-index: -1!important;
width: 641rpx;
height: 465rpx;
}
.play-btn {
width: 70rpx;
height: 70rpx;
position: absolute;
top: 232.5rpx;
left: 320.5rpx;
margin: -35rpx 0 0 -35rpx;
z-index: 100;
}
.swiper-cnt .video-cnt video {
border-radius: 12rpx;
width: 100%;
height: 100%;
}