微信小程序實現兩邊小中間大的輪播效果的示例代碼

不囉嗦，直接上代碼了

`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;`
`}`
`.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;`
`}`

感覺小程序有個swiper組件還是挺簡單實現的 沒有剛開始想的那麼難
本次給大家推薦一個交流圈，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入：582735936，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。