微信小程序实现的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表数据排序 sort table data
Feb 18 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
浅析Node在构建超媒体API中的作用
Jul 30 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
详解vuex的简单使用
Mar 12 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
拖动一个HTML元素
2006/12/22 Javascript
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
2014/06/17 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python调用staf自动化框架的方法
2018/12/26 Python
python在不同条件下的输入与输出
2020/02/13 Python
python matplotlib.pyplot.plot()参数用法
2020/04/14 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
专科应届生求职信
2013/11/24 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
思想作风建设心得体会
2014/10/22 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
员工保密协议范本,您一定得收藏!很有用!
2019/08/08 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
深入浅析Redis 集群伸缩原理
2021/05/15 Redis