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


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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
Jun 20 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
完美解决jQuery符号$与其他javascript 库、框架冲突的问题
Aug 09 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 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 日,周,月点击排行统计
2012/01/11 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
phpinfo无法显示的原因及解决办法
2019/02/15 PHP
Laravel 类和接口注入相关的代码
2019/10/15 PHP
浅谈PHP中的那些魔术常量
2020/12/02 PHP
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
2016/08/18 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
webpack-url-loader 解决项目中图片打包路径问题
2019/02/15 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
深入理解JavaScript 箭头函数
2019/05/30 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
仿照Element-ui实现一个简易的$message方法
2020/09/14 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python聊天室实例程序分享
2016/01/05 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
django反向解析URL和URL命名空间的方法
2018/06/05 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python_opencv用线段画封闭矩形的实例
2018/12/05 Python
python内存管理机制原理详解
2019/08/12 Python
基于python实现删除指定文件类型
2020/07/21 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
2014离婚协议书范文两篇
2014/09/15 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
信仰观后感
2015/06/03 职场文书
Python机器学习之PCA降维算法详解
2021/05/19 Python