微信小程式實現兩邊小中間大的輪播效果的示例程式碼
阿新 • • 發佈:2018-12-09
不囉嗦,直接上程式碼了
`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,快速升職加薪,走上人生巔峰。