微信小程序或uniapp使用swiper做的滑动案例

话不多说 直接代码 <template> <view class=""> <view class="mask"> <swiper @change="changeSwiper" class="my_swiper"> <swiper-item> <view class="bg_i...

话不多说 直接代码

<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>

你可能感兴趣的文章

相关问题

0 条评论

请先 登录 后评论
admin
admin

651 篇文章

作家榜 »

  1. admin 651 文章
  2. 粪斗 185 文章
  3. 王凯 92 文章
  4. 廖雪 78 文章
  5. 牟雪峰 12 文章
  6. 李沁雪 9 文章
  7. 全易 2 文章
  8. Stevengring 0 文章