话不多说 直接代码
<template> <view class=""> <view class="mask"> <swiper @change="changeSwiper" class="my_swiper"> <swiper-item> <view class="bg_img">6666666666666666666666666666666666</view> </swiper-item> <swiper-item> <view class="bg_img">22222222222222222222222222222222</view> </swiper-item> <swiper-item> <view class="bg_img">33333333333333333333333333333333</view> </swiper-item> </swiper> </view> </view> </template> <script> export default { data() { return { }; }, }; </script> <style lang="scss" scoped> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: #fff; z-index: 5; > .my_swiper { width: 100%; height: 60vh; .bg_img { background-size: 100% auto; background-repeat: no-repeat; background-position:center; width: 100%; height: 100%; } } } </style>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!