微信小程序实现的3d轮播图效果示例【基于swiper组件】


Posted in Javascript onDecember 11, 2018

本文实例讲述了微信小程序实现的3d轮播图效果。分享给大家供大家参考,具体如下:

前面写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁。这次发现swiper也能实现同样的效果。故记录一下。

先看看效果:

微信小程序实现的3d轮播图效果示例【基于swiper组件】

wxml:

<swiper previous-margin='50px' next-margin='50px' bindchange="swiperChange" style='height:{{swiperH}};'>
  <swiper-item wx:for='{{imgList}}' wx:key=''>
    <image class='le-img {{nowIdx==index?"le-active":""}}' bindload='getHeight' src='{{item}}' style='height:{{swiperH}};'></image>
  </swiper-item>
</swiper>

(1) previous-marginnext-margin 表示前边距和后边距,官网文档有说明的。

(2) swiperChange 就是swiper的切换事件名

(3) style='height:{{swiperH}}'  这是等比设置swiper高度,因为swiper有固定的高度,所以要动态修改一下。这篇文章也有类似的做法

(4) getHeight 是获取图片的宽高,然后再去设置高度这样才能让图片等比缩放

wxss:

swiper {
 padding-top: 30px;
}
.le-img {
 width: 100%;
 display: block;
 transform: scale(0.8);
 transition: all 0.3s ease;
 border-radius: 6px;
}
.le-img.le-active {
 transform: scale(1);
}

(1) 最主要的就是scale这个属性了,有了这个属性才能有第二张图片缩放的效果。

js:

data: {
  swiperH:'',//swiper高度
  nowIdx:0,//当前swiper索引
  imgList:[//图片列表
    "/public/img/idx-ad.png",
    "/public/img/idx-ad.png",
    "/public/img/idx-ad.png",
  ]
},
//获取swiper高度
getHeight:function(e){
  var winWid = wx.getSystemInfoSync().windowWidth - 2*50;//获取当前屏幕的宽度
  var imgh = e.detail.height;//图片高度
  var imgw = e.detail.width;
  var sH = winWid * imgh / imgw + "px"
  this.setData({
    swiperH: sH//设置高度
  })
},
//swiper滑动事件
swiperChange:function(e){
  this.setData({
    nowIdx: e.detail.current
  })
},

就这些简单的代码就完成啦 ^_^

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
js下利用控制器载入对应脚本
Jul 17 Javascript
浅析javascript中的DOM
Mar 01 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
jquery学习笔记之无new构建详解
Dec 07 jQuery
vue中添加mp3音频文件的方法
Mar 02 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 Javascript
详解TypeScript的基础类型
Feb 18 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 #Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 #Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 #Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 #jQuery
如何让node运行es6模块文件及其原理详解
Dec 11 #Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 #jQuery
详解react阻止无效重渲染的多种方式
Dec 11 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
学习php设计模式 php实现原型模式(prototype)
2015/12/07 PHP
PHP浮点数的一个常见问题
2016/03/10 PHP
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
2014/01/08 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
详解ES6中的let命令
2020/04/05 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
python中的列表推导浅析
2014/04/26 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python实现停车管理系统
2018/11/30 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
2016/02/27 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
机械设计毕业生自荐信
2014/02/02 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
python神经网络ResNet50模型
2022/05/06 Python
MySQL 原理与优化之原数据锁的应用
2022/08/14 MySQL