由于公司领导需要做视频和图片同时轮播的效果,本来以为很简单就能实现,没想到有大坑,在app端video的层级太高,查看插件市场并没有此类组件,于是自己手撸一个,也方便大家一起使用。
关于uniapp中video在app端层级过高的问题,导致在轮播的时候出现错位、卡顿、无法滑动等问题,可以使用视频、图片混合轮播 - DCloud 插件市场,该组件完美解决此类问题,兼容app、微信小程序、h5,使用vue2编写,如果使用vue3需要自己修改部分代码
使用方法:
1、导入组件
2、找到此文件。没有的话重新导入
3、使用案例,在使用的地方导入即可
<template>
<view class="swiper_view">
<MySwiper :list="bannerList"></MySwiper>
</view>
</template>
<script>
import MySwiper from '@/components/fuyu-MixSwiper/fuyu-MixSwiper/.vue'
export default {
components: {
MySwiper
},
data() {
return {
bannerList:[
{
id: 1,
url: 'https://www.w3schools.com/html/picture_example.jpg'
},
{
id: 2,
url: 'https://www.w3schools.com/html/mov_bbb.mp4'
},
{
id: 3,
url: 'https://www.w3schools.com/html/mov_bbb.mp4'
},
{
id: 4,
url: 'https://www.w3schools.com/html/picture_example.jpg'
},
{
id: 5,
url: 'https://www.w3schools.com/html/mov_bbb.mp4'
},
{
id: 6,
url: 'https://www.w3schools.com/html/picture_example.jpg'
},
]
}
},
methods: {
}
}
</script>
<style scoped>
.swiper_view {
height: 300rpx;
background-color: aliceblue;
border-radius: 20rpx;
overflow: hidden;
margin: 20rpx;
background-color: black;
}
</style>