隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來(lái)越高，傳統(tǒng)開發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。通過(guò)組件化開發(fā)，可以有效實(shí)現(xiàn)單獨(dú)開發(fā)，單獨(dú)維護(hù)，而且他們之間可以隨意的進(jìn)行組合。大大提升開發(fā)效率低，降低維護(hù)成本。
組件化對(duì)于任何一個(gè)業(yè)務(wù)場(chǎng)景復(fù)雜的前端應(yīng)用以及經(jīng)過(guò)多次迭代之后的產(chǎn)品來(lái)說(shuō)都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來(lái)支撐組件化的進(jìn)行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等 。
本文給大家介紹的一款組件是：前端Vue自定義輪播圖視頻播放組件 仿京東商品詳情輪播圖視頻Video播放 ，可圖片預(yù)覽，
效果圖如下:
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-613445.html
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-613445.html
# cc-videoSwiper
#### 使用方法
```使用方法
<!-- goodsData：輪播圖視頻數(shù)據(jù)? @setShowVideo：視頻按鈕點(diǎn)擊事件 -->
<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
```
#### HTML代碼實(shí)現(xiàn)部分
```html
<template>
<view class="content">
<!-- goodsData：輪播圖視頻數(shù)據(jù)? @setShowVideo：視頻按鈕點(diǎn)擊事件 -->
<cc-videoSwiper :goodsData="goodsData" @setShowVideo="setShowVideo"></cc-videoSwiper>
<!-- 預(yù)覽視頻彈窗 -->
<view class="mask" v-if="showVideo == true" @touchmove.stop.prevent="ondefault" @click="hideShow">
<view class="close">
<image src="/static/images/goods/close.png"></image>
</view>
</view>
<view class="previewvideo" v-if="showVideo == true">
<view class="videos">
<video class="nowvideos" id="nowVideo" v-if="showVideo == true" :src="goodsData.videos"
:autoplay="showVideo" :show-center-play-btn="true" :show-mute-btn="true"
:show-fullscreen-btn="false"></video>
</view>
</view>
<!-- 用來(lái)承載H5預(yù)覽視頻的 -->
<view style="position: absolute;top: -999upx;left: -999upx;">
<video ref="newVideo" id="newVideo" :src="goodsData.videos" :autoplay="showVideo"
:show-center-play-btn="false" :show-mute-btn="true" :show-fullscreen-btn="false"
@fullscreenchange="hideShow"></video>
</view>
</view>
</template>
<script>
export default {
data() {
return {
goodsData: {
videos: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
imgList: [
"https://cdn.pixabay.com/photo/2016/08/11/23/48/mountains-1587287_1280.jpg",
'https://cdn.pixabay.com/photo/2016/11/14/04/45/elephant-1822636_1280.jpg',
'https://cdn.pixabay.com/photo/2018/08/12/15/29/hintersee-3601004_1280.jpg',
'https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_1280.jpg'
],
},
showVideo: false,
newVideo: null
}
},
onLoad() {
this.newVideo = uni.createVideoContext('newVideo');
},
methods: {
//操作視頻
setShowVideo(showVideo, isH5) {
this.showVideo = showVideo
if (isH5 == true) {
this.newVideo.play()
}
console.log('視頻點(diǎn)擊播放');
},
// 關(guān)閉視頻
hideShow() {
this.showVideo = false
},
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
}
/* 預(yù)覽視頻彈窗 */
.mask {
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .8);
z-index: 200;
}
.previewvideo {
width: 100vw;
height: 100vw;
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
background-color: #000;
z-index: 900;
opacity: 1;
}
.close {
display: flex;
align-content: center;
align-items: flex-end;
position: absolute;
top: 140upx;
right: 20upx;
z-index: 900;
image {
width: 50upx;
height: 50upx;
display: block;
justify-content: center;
margin-left: 30upx;
margin-bottom: 20upx;
border-radius: 50%;
padding: 10upx;
background-color: rgba(0, 0, 0, 0.2);
}
}
.videos {
height: 100vw;
width: 100vw;
z-index: 10;
position: relative;
video {
width: 100%;
height: 100%;
}
}
.nowvideos {
width: 100%;
height: 100%;
margin: 0 auto;
}
</style>
```
閱讀全文下載完整組件代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開發(fā)
?
?
?
?
到了這里，關(guān)于前端Vue自定義輪播圖視頻播放組件 仿京東商品詳情輪播圖視頻Video播放效果 可圖片預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
