微信小程序实现卡片层叠滑动效果


Posted in Javascript onJune 21, 2019

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下

微信小程序实现卡片层叠滑动效果

代码:

js:

// index/gun/jsSwiper2/jsSwiper2.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
 startX: 0,
 endX: 0,
 iCenter: 3,
 datas: [{
  id: 1,
  zIndex: 2,
  opacity: 0.2,
  left: 40,
  iamge: "../../images/1.jpg",
  animation: null
 },
 {
  id: 2,
  zIndex: 4,
  opacity: 0.4,
  left: 80,
  iamge: "../../images/2.jpg",
  animation: null
 },
 {
  id: 3,
  zIndex: 6,
  opacity: 0.6,
  left: 120,
  iamge: "../../images/3.jpg",
  animation: null
 },
 {
  id: 4,
  zIndex: 8,
  opacity: 1,
  left: 160,
  iamge: "../../images/4.jpg",
  animation: null
 },
 {
  id: 5,
  zIndex: 6,
  opacity: 0.6,
  left: 200,
  iamge: "../../images/5.jpg",
  animation: null
 },
 {
  id: 6,
  zIndex: 4,
  opacity: 0.4,
  left: 240,
  iamge: "../../images/6.jpg",
  animation: null
 },
 {
  id: 7,
  zIndex: 2,
  opacity: 0.2,
  left: 280,
  iamge: "../../images/7.jpg",
  animation: null
 },
 ],
 order: []
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 this.__set__();
 this.move();
 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 },
 move: function () {
 var datas = this.data.datas;
 /*图片分布*/
 for (var i = 0; i < datas.length; i++) {
  var data = datas[i];
  var animation = wx.createAnimation({
  duration: 200
  });
  animation.translateX(data.left).step();
  this.setData({
  ["datas[" + i + "].animation"]: animation.export(),
  ["datas[" + i + "].zIndex"]: data.zIndex,
  ["datas[" + i + "].opacity"]: data.opacity,
  })
 }
 },
 /**左箭头 */
 left: function () {
 //
 var last = this.data.datas.pop(); //获取数组的最后一个
 this.data.datas.unshift(last);//放到数组的第一个
 var orderFirst = this.data.order.shift();
 this.data.order.push(orderFirst);
 this.move();
 },
 /** */
 right: function () {
 var first = this.data.datas.shift(); //获取数组的第一个
 this.data.datas.push(first);//放到数组的最后一个位置
 var orderLast = this.data.order.pop();
 this.data.order.unshift(orderLast);
 this.move();
 },
 /**点击某项 */
 choose: function (e) {
 var that = this;
 var id = e.currentTarget.dataset.id;
 var order = that.data.order;
 var index = 0;
 for (var i = 0; i < order.length; i++) {
  if (id == order[i]) {
  index = i;
  break;
  }
 }
 if (index < that.data.iCenter) {
  for (var i = 0; i < that.data.iCenter - index; i++) {
  this.data.datas.push(this.data.datas.shift()); //获取第一个放到最后一个
  this.data.order.unshift(this.data.order.pop());
  // this.right() 
  }
 } else if (index > that.data.iCenter) {
  for (var i = 0; i < index - that.data.iCenter; i++) {
  this.data.datas.unshift(this.data.datas.pop()); //获取最后一个放到第一个
  this.data.order.push(this.data.order.shift());
  // this.left();
  }
 }
 this.move();
 },
 /**新的排列复制到新的数组中 */
 __set__: function () {
 var that = this;
 var order = that.data.order;
 var datas = that.data.datas;
 for (var i = 0; i < datas.length; i++) {
  that.setData({
  ["order[" + i + "]"]: datas[i].id
  })
 }
 },
 //手指触发开始移动
 moveStart: function (e) {
 console.log(e);
 var startX = e.changedTouches[0].pageX;
 this.setData({
  startX: startX
 });
 },
 //手指触摸后移动完成触发事件
 moveItem: function (e) {
 console.log(e);
 var that = this;
 var endX = e.changedTouches[0].pageX;
 this.setData({
  endX: endX
 });
 //计算手指触摸偏移剧距离
 var moveX = this.data.startX - this.data.endX;
 //向左移动
 if (moveX > 20) {
  this.left();
 }
 if (moveX < -20) {
  this.right();
 }
 },
})

wxml:

<view class="teachers_banner">
 <view class="container clearfix teachers_b">
 <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>

  <block wx:for="{{datas}}">
  <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};" bindtap="choose" data-id="{{item.id}}">
   <image src="{{item.iamge}}"></image>
  </li>
  </block>

 </view>
 </view>
</view>

wxss:

.teachers_banner {
 width: 100%;
 height: 650px;
 background-size: cover;
 position: relative;
 overflow: hidden;
}

.teachers_b {
 position: relative;
 margin-top: 80px;
}

#slide {
 margin: 0 auto;
 width: 100%;
 height: 350px;
 position: relative;
}

image {
 width: 400rpx;
 height: 550rpx;
}

#slide li {
 position: absolute;
 width: 400rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}

#slide li img {
 width: 100%;
 height: 100%;
}

.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}

.slide_right dl {
 padding-top: 10px;
}

.arrow .prev, .arrow .next {
 position: absolute;
 width: 50px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}

效果:

1.左右滑动时,向相应方向移动一个卡片位置;
2.点击某一项时,将点击项位置移动到中间位置;

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

Javascript 相关文章推荐
JavaScript写的一个DIV 弹出网页对话框
Aug 14 Javascript
JS中eval函数的使用示例
Jul 21 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
javascript格式化json显示实例分析
Apr 21 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
使用express来代理服务的方法
Jun 21 #Javascript
react+redux仿微信聊天界面
Jun 21 #Javascript
基于jQuery的时间戳与日期间的转化
Jun 21 #jQuery
jQuery事件委托代码实践详解
Jun 21 #jQuery
Vue.js中的extend绑定节点并显示的方法
Jun 20 #Javascript
微信小程序动态显示项目倒计时
Jun 20 #Javascript
微信小程序实现日期格式化和倒计时
Nov 01 #Javascript
You might like
PHP 加密与解密的斗争
2009/04/17 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
为你总结一些php信息函数
2015/10/21 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
JavaScript包装对象使用介绍
2013/08/29 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
java必学必会之static关键字
2015/12/03 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
谈谈JavaScript中的垃圾回收机制
2020/09/17 Javascript
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Django单元测试工具test client使用详解
2019/08/02 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
毕业生自荐信的主要内容
2013/10/29 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
魅力教师事迹材料
2014/01/10 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
中学生运动会入场词
2014/02/12 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
元旦晚会开场白
2015/05/29 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
如何用threejs实现实时多边形折射
2021/05/07 Javascript