微信小程序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代码
Jun 27 Javascript
图片格式的JavaScript和CSS速查手册
Aug 20 Javascript
JS面向对象编程浅析
Aug 28 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jquery text()方法取标签中的文本
Jul 25 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 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 5.0创建图形的巧妙方法
2010/10/12 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP中比较时间大小实例
2014/08/21 PHP
php遍历目录方法小结
2015/03/10 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
浅析jquery的作用与优势
2013/12/02 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
详细讲解vue2+vuex+axios
2017/05/27 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
2017/07/31 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
python微信跳一跳系列之自动计算跳一跳距离
2018/02/26 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
django中瀑布流写法实例代码
2019/10/14 Python
利用Python裁切tiff图像且读取tiff,shp文件的实例
2020/03/10 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
2014年大学生四年规划书范文
2014/04/03 职场文书
临床专业自荐信
2014/06/22 职场文书
面试自我评价范文
2014/09/17 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
教师个人师德总结
2015/02/06 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python