您的位置:首页 > 移动开发 > 微信开发

微信小程序实现两边小中间大的轮播效果的示例代码

2018-12-09 18:01 836 查看

不啰嗦,直接上代码了

`imgUrls: [`
`{`
`url:` `'[http://img02.tooopen.com/images/20150928/tooopen_sy
4000
_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,快速升职加薪,走上人生巅峰。

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐