微信小程序实现的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教程之不完整的继承(js原型链)
Jan 13 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 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源代码
2013/06/26 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php 问卷调查结果统计
2015/10/08 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
关于微信中a链接无法跳转问题
2016/08/02 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
Python 字符串操作(string替换、删除、截取、复制、连接、比较、查找、包含、大小写转换、分割等)
2018/03/19 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python中Selenium模块的使用详解
2020/10/09 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
索赔员岗位职责
2015/02/15 职场文书
解除租赁合同协议书
2016/03/21 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
JavaScript的Set数据结构详解
2022/02/18 Javascript
HTML CSS 一个标签实现带动画的抖音LOGO
2022/04/26 HTML / CSS
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS