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


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 相关文章推荐
AJAX分页的代码(后台asp.net)
Feb 14 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
JavaScript原生数组函数实例汇总
Oct 14 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仿ZOL分页类代码
2008/10/02 PHP
用PHP实现读取和编写XML DOM代码
2010/04/07 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP implode()函数用法讲解
2019/03/08 PHP
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js动态改变select选择变更option的index值示例
2014/07/10 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
关于react-router的几种配置方式详解
2017/07/24 Javascript
使用重写url机制实现验证码换一张功能
2017/08/01 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
使用python实现个性化词云的方法
2017/06/16 Python
django中send_mail功能实现详解
2018/02/06 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
python实现飞机大战
2018/09/11 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python实现经纬度采样的示例代码
2020/12/10 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
道德模范先进事迹
2014/02/14 职场文书
热门专业求职信
2014/05/24 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
学雷锋的心得体会
2014/09/04 职场文书
思想作风整顿个人剖析材料
2014/10/06 职场文书
中小学生学籍证明
2014/10/25 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python