微信小程序swiper实现滑动放大缩小效果


Posted in Javascript onNovember 15, 2018

效果图如下所示:

微信小程序swiper实现滑动放大缩小效果

具体代码如下所示:

<swiper class="swiper-block" previous-margin="90rpx" next-margin="90rpx" current="0" bindchange="swiperChange">
<block wx:for="{{imgUrls}}" wx:index="{{index}}">
<swiper-item class="swiper-item">
<image mode="aspectFill" src="{{item}}" class="slide-image {{swiperIndex == index ? 'active' : ''}}"/>
</swiper-item>
</block>
</swiper>
.swiper-block{
height: 480rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow:unset;
}
.slide-image{
height:320rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active{
transform: scale(1.14);
transition:all .2s ease-in 0s;
z-index: 20;
}.swiper-block{
height: 480rpx;
width: 100%;
}
.swiper-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
overflow:unset;
}
.slide-image{
height:320rpx;
width: 520rpx;
border-radius: 9rpx;
box-shadow: 0px 0px 30rpx rgba(0, 0,0,.2);
margin: 0rpx 30rpx;
z-index: 1;
}
.active{
transform: scale(1.14);
transition:all .2s ease-in 0s;
z-index: 20;
}
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000
},
swiperChange(e) {
const that = this;
that.setData({
swiperIndex: e.detail.current,
})
}
})

总结

以上所述是小编给大家介绍的微信小程序swiper实现滑动放大缩小效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
js判断当前页面用什么浏览器打开的方法
Jan 06 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
标准的js无缝滚动效果
Aug 30 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
js实现动态显示时间效果
Mar 06 Javascript
angularjs项目的页面跳转如何实现(5种方法)
May 25 Javascript
gulp教程_从入门到项目中快速上手使用方法
Sep 14 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
微信小程序页面缩放式侧滑效果的实现代码
Nov 15 #Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 #Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
Nov 15 #Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 #Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
You might like
如何使用PHP往windows中添加用户
2006/12/06 PHP
PHP 获取客户端真实IP地址多种方法小结
2010/05/15 PHP
php 代码优化之经典示例
2011/03/24 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
javascript常见用法总结
2014/05/22 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
NodeJs之word文件生成与解析的实现代码
2019/04/01 NodeJs
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
通过5个知识点轻松搞定Python的作用域
2016/09/09 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
win7 x64系统中安装Scrapy的方法
2018/11/18 Python
遗体告别仪式答谢词
2014/01/23 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书
申报材料格式
2014/12/30 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
搞笑婚前保证书
2015/02/28 职场文书
会计工作能力自我评价
2015/03/05 职场文书
实习推荐信格式模板
2015/03/27 职场文书
表扬信范文
2019/04/22 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL