微信小程序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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
JavaScript中立即执行函数实例详解
Nov 04 Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
node爬取新型冠状病毒的疫情实时动态
Feb 06 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
实现51Map地图接口(示例代码)
2013/11/22 Javascript
JS脚本defer的作用示例介绍
2014/01/02 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
应聘医药代表职位求职信
2013/10/21 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
装修活动策划方案
2014/08/27 职场文书
公司放假通知范文
2015/04/14 职场文书
办公室禁烟通知
2015/04/23 职场文书
党支部考察意见范文
2015/06/02 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python