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


Posted in Javascript onAugust 26, 2019

小程序层叠卡片滑动效果,供大家参考,具体内容如下

效果图

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

wxml

<!-- 轮播wxml代码 -->
<view class="teachers_banner">
 <view class="lunbo_center clearfix teachers_b">
  <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
   <ul>
    <block wx:for="{{datas}}" wx:key>
     <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};"
      bindtap="choose" data-id="{{item.id}}">
      <image src="{{item.iamge}}" />
     </li>
    </block>
   </ul>
  </view>
 </view>
</view>

wxss

/*轮播图片*/
.lunbo_center {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
 padding: 50rpx 0;
 box-sizing: border-box;
}
.teachers_b {
 position: relative;
}
#slide {
 margin: 0 auto;
 width: 100%;
 height: 160px;
 position: relative;
}
#slide li {
 position: absolute;
 width: 600rpx;
 height: 300rpx;
 display: -webkit-box;
 display: -webkit-flex;
 display: flex;
 align-items: flex-start;
 -webkit-box-align: flex-start;
 -webkit-align-items: flex-start;
 background: #fff;
 overflow: hidden;
 box-shadow: 0 0 20px #1d374d;
}
#slide li image {
 width: 100%;
 height: 100%;
}
.slide_left {
 width: 240px;
}
.slide_right {
 padding: 40px;
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 flex: 1;
 min-width: 0;
}
.slide_right h3 {
 font: 400 30px/18px "Microsoft Yahei";
 color: #222;
}
.slide_right h3 span {
 display: inline-block;
 margin-left: 10px;
 font: 400 14px/36px "Microsoft Yahei";
 color: #555;
}
.slide_right p {
 padding: 20px 0 30px;
 color: #555;
 font: 400 14px/24px "Microsoft Yahei";
 border-bottom: 1px solid #dbdbdb;
}
.slide_right dl {
 padding-top: 30px;
}
.slide_right dd {
 /* float: left; */
 width: 33.3%;
 color: #777;
 font: 400 12px/24px "Microsoft Yahei";
}
.slide_right dd h3 {
 color: #ff9000;
 margin-bottom: 20px;
}
.arrow {
 display: none;
}
.arrow .prev, .arrow .next {
 position: absolute;
 width: 64px;
 top: 38%;
 z-index: 9;
 font: 700 96px 'simsun';
 opacity: 0.3;
 color: #fff;
 cursor: pointer;
}
.arrow .prev {
 left: -220px;
}
.arrow .next {
 right: -220px;
}
.arrow .prev:hover, .arrow .next:hover {
 color: #00a0e9;
 opacity: 0.7;
}

js

// js代码
Page({
 /**
  * 页面的初始数据
  */
 data: {
  startX: 0,
  endX: 0,
  iCenter: 3,
  datas: [{
   id: 1,
   zIndex: 2,
   opacity: 0.2,
   left: 10,
   iamge: "../../icon/lunbo2.jpg",
   animation: null
  },
  {
   id: 2,
   zIndex: 4,
   opacity: 0.4,
   left: 20,
   iamge: "../../icon/lunbo3.jpg",
   animation: null
  },
  {
   id: 3,
   zIndex: 6,
   opacity: 0.6,
   left: 30,
   iamge: "../../icon/lunbo4.jpg",
   animation: null
  },
  {
   id: 4,
   zIndex: 8,
   opacity: 1,
   left: 40,
   iamge: "../../icon/lunbo1.jpg",
   animation: null
  },
  {
   id: 5,
   zIndex: 6,
   opacity: 0.6,
   left: 50,
   iamge: "../../icon/lunbo2.jpg",
   animation: null
  },
  {
   id: 6,
   zIndex: 4,
   opacity: 0.4,
   left: 60,
   iamge: "../../icon/lunbo3.jpg",
   animation: null
  } ,
  {
   id: 7,
   zIndex: 2,
   opacity: 0.2,
   left: 70,
   iamge: "../../icon/lunbo1.jpg",
   animation: null
  }
  ],
  order: []
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.__set__();
  this.move();
 },
 move: function () {
  var datas = this.data.datas;
  /*图片分布*/
  for (var i = 0; i < datas.length; i++) {
   var data = datas[i];
   var animation = wx.createAnimation({
    duration: 100
   });
   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();
  }
 },
})

欢迎参考!

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

Javascript 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
javascript学习笔记(十) js对象 继承
Jun 19 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
google广告之另类js调用实现代码
Aug 22 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
微信小程序 数据缓存实现方法详解
Aug 26 #Javascript
使用typescript构建Vue应用的实现
Aug 26 #Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP关于htmlspecialchars、strip_tags、addslashes的解释
2014/07/04 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
javascript图片延迟加载实现方法及思路
2015/12/31 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
js数字舍入误差以及解决方法(必看篇)
2017/02/28 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
使用nvm管理不同版本的node与npm的方法
2017/10/31 Javascript
关于RxJS Subject的学习笔记
2018/12/05 Javascript
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[30:55]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第二场 11.18
2020/11/18 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python中作用域的深入讲解
2018/12/10 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
自我评价200字分享
2013/12/17 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
出国留学介绍信
2014/01/13 职场文书
答谢会策划方案
2014/05/12 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书