微信小程序实例:实现3D轮播图特效代码

来源:不言 发布时间:2018-08-29 16:22:40 阅读量:1165

本篇文章给大家带来的内容是关于微信小程序实例:实现3D轮播图特效代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现

效果图如下:

image.png

1.swiper的相关属性

indicator-dots 是否显示小圆点,也可以自己重新设置小圆点

circular 是否衔接滑动,就是实现无限滚动

previous-margin 与上一张图片的间距

next-margin 与下一张图片的间距

autoplay 实现自动滚动

这里主要利用了circular实现无限滚动,然后再加上前后间距,再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了

wxml文件

image.png

wxss文件

image.png

JS文件

image.png


标签: 小程序
分享:
评论:
你还没有登录,请先