swiper3D效果

1.previous-margin next-margin设置上一个下一个间距

2.autoplay="true"设置自动播放，优化第一张显示问题，circular="true"设置自动衔接

3.所有图片scale设置0.9 ，transform:scale(0.9);当前为1transform:scale(1);

4.用@change="changehandler"事件，可以监听到当前自动播放的索引

<swiper-item class="hcc" v-for="item in 10" :key="item">

</swiper-item>

</swiper>

.swiper {

background: rgb(209, 191, 191);

}

.small {

transform: scale(0.9);

opacity: 0.6;

}

.current {

transform: scale(1);

opacity: 8;

z-index: 100;

}

.item {

border-radius: 30rpx;

width: 561rpx;

height: 936rpx;

transition: transform 1s, opacity 0.3s;

// border: 1rpx gray solid;

}

export default {

data() {

return {

message: "",

cur: 0

};

components: {},

methods: {

changehandler(e) {

this.cur = e.mp.detail.current;

}

created() {}

};

</script>

swiper3D效果相关推荐

关于Mongodb的全面总结
MongoDB的内部构造<MongoDB The Definitive Guide> MongoDB的官方文档基本是how to do的介绍,而关于how it worked却少之又少,本 ...
KITTI数据集上MaskRCNN检测效果示例
KITTI数据集上MaskRCNN检测效果示例在Semantic Instance Segmentation Evaluation中,MaskRCNN性能效果排名第一. Test Image 0 I ...
YOLOv4 资源环境配置和测试样例效果
YOLOv4 资源环境配置和测试样例效果基本环境:cuda=10.0,cudnn>=7.0, opencv>=2.4 一.下载yolov4 git clone https://githu ...
HarmonyOS 实现跑马灯效果
跑马灯效果实现效果图注意事项: HarmonyOS里面Text由于multiple_lines默认为false 所以我们可以直接来设置跑马灯效果,当想设置Text换行的时候设置multiple_li ...
python 2x list 里面的中文打印效果为unicode 编码的处理方法
处理方法如下.这个问题在python 3x 中不会出现 #!/usr/bin/python # -*- coding: utf-8 -*- import sys reload(sys) sys.set ...
Python 2x 中list 里面的中文打印效果乱码
事情是这样的本来是处理python2x 中list 里面的中文打印为unicode 想处理下打印为中文,处理之后打印的效果中文乱码了代码如下 #!/usr/bin/python # -*- cod ...
Android CheckBox 点击的时候没有效果
写了一个CheckBox 点击的时候没有效果感觉莫名其妙的,最后在xml 中设置了 android:clickable="true" 点击有效果了, 见鬼了.
ImageView / Text 使用 android:state_pressed 没有效果的处理方法
android:state_pressed 实现按压效果, 的时候没有作用处理方法就是在xml 或者java 代码给图片设置 android:clickable="true" 如 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
Android RecyclerView(和SnapHelper) 实现类似ViewPager的效果
实现的效果图如下 2 行代码就实现了,其余的都是recyclerview 的代码如果不显示一次可以滑动多个的话可以使用LinearSnapHelper 具体代码如下(实际就2行代码呢) recycl ...

swiper3D效果

swiper3D效果相关推荐

最新文章

热门文章