微信小程序实现两边小中间大的轮播效果的示例代码
3672Js.Com2019-03-10 12:52 来源:未知 阅读:1794 关注度5
微信小程序实现两边小中间大的轮播效果的示例代码
不啰嗦,直接上代码了
`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,快速升职加薪,走上人生巅峰。
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭