微信小程序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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
javascript cookies操作集合
Apr 12 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
JavaScript中对象介绍
Dec 31 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
Jul 24 Javascript
react build 后打包发布总结
Aug 24 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue 实现微信浮标效果
Sep 01 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
小程序表单认证布局及验证详解
Jun 19 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 smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
JavaScript实用代码小技巧
2018/08/23 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
js实现鼠标切换图片(无定时器)
2021/01/27 Javascript
Python实现list反转实例汇总
2014/11/11 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
使用Python对微信好友进行数据分析
2018/06/27 Python
Django REST framework内置路由用法
2019/07/26 Python
详解rem 适配布局
2018/10/31 HTML / CSS
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
一岗双责责任书
2014/04/15 职场文书
调查研究项目计划书
2014/04/29 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
教师个人培训总结
2015/02/11 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
OpenCV-Python实现轮廓拟合
2021/06/08 Python