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


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 相关文章推荐
JS的IE和Firefox兼容性集锦
Dec 11 Javascript
js实现的网站首页随机公告随机公告
Mar 14 Javascript
IE6下拉框图层问题探讨及解决
Jan 03 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
简单的JS时钟实例讲解
Jan 13 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
JS库之Highlight.js的用法详解
Sep 13 Javascript
jquery层次选择器的介绍
Jan 18 jQuery
浅析js实现网页截图的两种方式
Nov 01 Javascript
js中复选框的取值及赋值示例详解
Oct 18 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
使用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预定义常量
2006/12/25 PHP
PHP页面中文乱码分析
2013/10/29 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
2015/08/27 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
2015/09/24 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
2016/05/24 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
在Python中实现贪婪排名算法的教程
2015/04/17 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python装饰器练习题及答案
2019/11/01 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
应届生英语教师求职信
2013/11/05 职场文书
追悼会子女答谢词
2014/01/28 职场文书
应届生面试求职信
2014/07/02 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
师范生免费教育协议书范本
2014/10/09 职场文书
校运会加油稿大全
2015/07/22 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python