脚本宝典收集整理的这篇文章主要介绍了微信小程序实现两边小中间大的轮播效果的示例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
不啰嗦，直接上代码了
`imgUrls: [`
`{`
`url:` `'[http://img02.toooPEn.COM/images/20150928/tooopen_sy_143912755726.jpg](http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg)'``,`
`isChange:1,`
`},`
`{`
`url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg)'``,`
`isChange: 2,`
`},`
`{`
`url:` `'[http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg](http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg)'``,`
`iChange: 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``:``520``rpx;`
`margin``:``20``rpx` `30``rpx;`
`}`
`.shuffing{`
`text-align``:` `center``;`
`width``:``100%``;`
`position``:` `relative``;`
`}`
`.shuffing-item{`
`position``:` `absolute``;`
`width``:``100%``;`
`lef``:``50%``;`
`top``:``50%``;`
`transform: translatex(``-50%``) translateY(``-50%``);`
`height``:``520``rpx;`
`transition:` `all` `0.3``s;`
`}`
`.shuffing-item-next{`
`width``:``85%``;`
`height``:``85%``;`
`transform:translateX(``-100%``) translateY(``-50%``);`
`transition:` `all` `0.3``s;`
`}`
欢迎加入全栈开发交流划水交流圈：582735936
面向划水1-3年前端人员
帮助突破划水瓶颈，提升思维能力
`.shuffing-item-preo{`
`width``:``85%``;`
`height``:``85%``;`
`transform:translateX(``40%``) translateY(``-50%``);`
`transition:` `all` `0.3``s;`
`}`
`.shuffing-item>image{`
`width``:``100%``;`
`height``:``100%``;`
`}`
`.shuffing-mask{`
`position``:` `absolute``;`
`bottom``:` `0``;`
`width``:``100%``;`
`line-height``:` `60``rpx;`
`background``: rgba(``0``,``0``,``0``,``0.6``);`
`color``:``#fff``;`
`display``: flex;`
`justify-``content``: space-between;`
`padding``:``0` `20``rpx;`
`}`以上是脚本宝典为你收集整理的微信小程序实现两边小中间大的轮播效果的示例代码全部内容，希望文章能够帮你解决微信小程序实现两边小中间大的轮播效果的示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。