您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这期内容当中小编将会给大家带来有关怎么在微信小程序中实现一个两边小中间大的轮播效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
我主要的想法就是给个标识 当滑动到某个图片时让他的样式处于大图状态 他的上一张是缩小并出现左边部分 下一张缩小出现右边部分 所以我讲循环的图片数据改为了这样
imgUrls: [ { url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', isChange:1, }, { url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg', isChange: 2, }, { url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg', isChange: 3, }, ],
字段isChange是用来判断图片样式的
页面代码
<swiper indicator-dots="{{false}}" autoplay="{{false}}" previous-margin='80rpx' next-margin='80rpx' bindchange='swiperChange'> <block wx:for="{{imgUrls}}" wx:for-item='item' wx:key=''> <swiper-item> <view class="shuffing-item {{item.isChange==2?'shuffing-item-next':item.isChange==0?'shuffing-item-preo':''}}"> <image src="{{item.url}}"></image> <view class='shuffing-mask'> <text>开启不老童话</text> <text>></text> </view> </view> </swiper-item> </block> </swiper>
样式代码
swiper{ height:520rpx; margin:20rpx 30rpx; } .shuffing{ text-align: center; width:100%; position: relative; } .shuffing-item{ position: absolute; width:100%; left:50%; top:50%; transform: translateX(-50%) translateY(-50%); height:520rpx; transition: all 0.3s; } .shuffing-item-next{ width:85%; height:85%; transform:translateX(-100%) translateY(-50%); transition: all 0.3s; } .shuffing-item-preo{ width:85%; height:85%; transform:translateX(40%) translateY(-50%); transition: all 0.3s; } .shuffing-item>image{ width:100%; height:100%; } .shuffing-mask{ position: absolute; bottom: 0; width:100%; line-height: 60rpx; background: rgba(0,0,0,0.6); color:#fff; display: flex; justify-content: space-between; padding:0 20rpx; }
上述就是小编为大家分享的怎么在微信小程序中实现一个两边小中间大的轮播效果了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。