微信小程序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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
Jun 20 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
Dec 06 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery 实现倒计时天,时,分,秒功能
Jul 31 jQuery
微信小程序解除10个请求并发限制
Dec 18 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 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
Adodb的十个实例(清晰版)
2006/12/31 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
javascript 学习之旅 (2)
2009/02/05 Javascript
jQuery 源码分析笔记(5) jQuery.support
2011/06/19 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
举例讲解Python中is和id的用法
2015/04/03 Python
Python numpy生成矩阵、串联矩阵代码分享
2017/12/04 Python
Python实现CNN的多通道输入实例
2020/01/17 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
党员自我评价分享
2013/12/13 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
网吧消防安全责任书
2014/07/29 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Python合并多张图片成PDF
2021/06/09 Python
Python常遇到的错误和异常
2021/11/02 Python