微信小程序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 相关文章推荐
用js实现的抽象CSS圆角效果!!
May 03 Javascript
javascript multibox 全选
Mar 22 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
Jan 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
Jquery跨域获得Json的简单实例
May 18 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
使用Math.max,Math.min获取数组中的最值实例
Apr 25 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
搭建vue开发环境
Jul 19 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vuex state中的数组变化监听实例
Nov 06 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
wordpress之wp-settings.php
2007/08/17 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP生成唯一ID之SnowFlake算法
2016/12/17 PHP
简单实现php上传文件功能
2017/09/21 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
webpack优化的深入理解
2018/12/10 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
2020/02/05 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
Python 登录网站详解及实例
2017/04/11 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python字节单位转换实例
2019/12/05 Python
python numpy库np.percentile用法说明
2020/06/08 Python
is_file和file_exists效率比较
2021/03/14 PHP
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
置业顾问岗位职责
2014/03/02 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
2014年环境卫生工作总结
2014/11/24 职场文书
政工师工作总结2015
2015/05/26 职场文书
委托书范本格式
2019/04/18 职场文书
python用字节处理文件实例讲解
2021/04/13 Python