微信小程序3D轮播实现代码


Posted in Javascript onSeptember 19, 2019

这篇文章主要介绍了微信小程序3D轮播实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

代码如下

<!-- 轮播图 -->
<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>
<!-- 轮播图end -->
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);
}
// pages/swiper/swiper.js
Page({
/**
* 页面的初始数据
*/
data: {
swiperH: '',//swiper高度

nowIdx: 0,//当前swiper索引

imgList: [//图片列表


'../../imgs/swiper1.jpg',


'../../imgs/swiper2.jpg',


'../../imgs/swiper3.jpg',

]
},
//获取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

})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

效果如下

微信小程序3D轮播实现代码

微信小程序3D轮播实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
jQuery性能优化的38个建议
Mar 04 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
Javascript实现图片懒加载插件的方法
Oct 20 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
js随机生成一个验证码
Jun 01 Javascript
基于JavaScript实现无缝滚动效果
Jul 21 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
layui table 参数设置方法
Aug 14 Javascript
layui 实现表格某一列显示图标
Sep 19 #Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 #Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 #Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 #Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
对layui中table组件工具栏的使用详解
Sep 19 #Javascript
You might like
用php来限制每个ip每天浏览页面数量的实现思路
2015/02/24 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
JavaScript中Function详解
2015/02/27 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
jq checkbox 的全选并ajax传参的实例
2017/04/01 Javascript
Angular CLI在Angular项目中如何使用scss详解
2018/04/10 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
python实现杨氏矩阵查找
2019/03/02 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
Python json转字典字符方法实例解析
2020/04/13 Python
Python3读写ini配置文件的示例
2020/11/06 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
材料加工硕士生求职信
2013/10/10 职场文书
旅游个人求职信范文
2014/01/30 职场文书
个人担保书格式范文
2014/05/12 职场文书
打架检讨书范文
2015/01/27 职场文书
校友回访母校寄语
2015/02/26 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书