微信小程序实现两边小中间大的轮播效果的示例代码
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,快速升职加薪,走上人生巅峰。
相关文章推荐
- 微信小程序实现两边小中间大的轮播效果的示例代码
- 微信小程序左滑删除效果的实现代码
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- [微信小程序]实现一个自定义遮罩层组件(完整示例代码附效果图)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 微信小程序实现鼠标拖动效果示例
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 微信小程序中实现手指缩放图片的示例代码
- [导入]AjaxPanel自定义控件实现页面无刷新数据交互(做了个示例程序, 效果确实比较Cool, 用法非常简单! )(示例代码下载)
- 微信小程序 实现tabs选项卡效果实例代码
- java实现微信小程序登录态维护的示例代码
- 微信小程序实现跑马灯效果(完整代码)
- 微信小程序实战篇之购物车的实现代码示例
- 微信小程序实现跑马灯效果完整代码(附效果图)
- 微信小程序局部刷新触发整页刷新效果的实现代码
- Vue实现内部组件轮播切换效果的示例代码
- 微信小程序实现带缩略图轮播效果
- 微信小程序实现轮播图效果
- 微信小程序实现下拉刷新和轮播图效果