手机版

微信小程序实现类三维(三维的缩写)轮播图

时间:2021-12-07 来源:互联网 编辑:宝哥软件园 浏览:

效果图如下微信小程序实现类3D轮播图(图1)

1.swiper的相关属性

指示点是否显示小圆点,也可以自己重新设置小圆点圆形的;循环的是否衔接滑动,就是实现无限滚动前边距与上一张图片的间距下一页边空白与下一张图片的间距自动播放实现自动滚动这里主要利用了圆形的;循环的实现无限滚动,然后再加上前后间距,再设置图片的层级和透明度就可以实现了,将图片及容器的高度设置好就差不多可以实现了wxml文件!-转盘/索引。wxml-swiper class=' imageContainer ' bind change=' handleChange ' previous-margin=' 50 rpx ' next-margin=' 50 rpx '循环自动播放块wx : for=' { { 3 } } ' wx 3360 key=' { { index } } ' swiper-item class=' item ' image class=' item img { { CurrentDex==index ' '活动: ' ' } } ' src=”./././image/3。jpg '/image/swiper-item/block/swiper wxss文件/*转盘/索引。wxss */page {背景: # f7f 7 f7f 7}.图像容器{宽度: 100%;高度: 500 rpx背景技术: # 000;}.项目{ height: 500rpx}。itemImg{ position:绝对值;宽度: 100%;高度: 380 rpx border-半径: 15 rpxz指数: 5;opa city 3360 0.7 top : 13%;}.活跃{ opa city 3360 1;z指数: 10;height : 430 rpx top : 7%;全部转:2s轻松进入0s;}JS文件//转盘/索引。js页面({ data : { current exx : 0 },onLoad:函数(选项){ },/*这里实现控制中间凸显图片的样式*/handleChange:函数{这个。setdata({ current defx : e . detail。当前})},})正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)

版权声明:微信小程序实现类三维(三维的缩写)轮播图是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。