微信小程序实现的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 相关文章推荐
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
JavaScript程序中的流程控制语句用法总结
May 23 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
OpenLayers3实现地图显示功能
Sep 25 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 已经成熟
2006/12/04 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php入门之连接mysql数据库的一个类
2012/04/21 PHP
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
js 调用父窗口的具体实现代码
2013/07/15 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Djang中静态文件配置方法
2015/07/30 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
详解python数据结构和算法
2019/04/18 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
求职自荐信格式
2013/12/04 职场文书
新春寄语大全
2014/04/09 职场文书
庆祝教师节标语
2014/10/09 职场文书
先进学校事迹材料
2014/12/30 职场文书
报名委托书
2015/01/29 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
病房管理制度范本
2015/08/06 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技