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


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 相关文章推荐
用JavaScript获取DOM元素位置和尺寸大小的方法
Apr 12 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
Nov 05 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
微信小程序 数据缓存实现方法详解
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 ftp文件上传函数(基础版)
2010/06/03 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
php实现websocket实时消息推送
2018/03/30 PHP
PHP实现的62进制转10进制,10进制转62进制函数示例
2019/06/06 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
JQuery的Ajax跨域请求原理概述及实例
2013/04/26 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
JS获取和修改元素样式的实例代码
2016/08/06 Javascript
Javascript 普通函数和构造函数的区别
2016/11/05 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
Iview Table组件中各种组件扩展的使用
2018/10/20 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python实现数通设备端口监控示例
2014/04/02 Python
Python实现控制台进度条功能
2016/01/04 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
pandas删除指定行详解
2019/04/04 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
和平主题的演讲稿
2014/01/12 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
财产保全担保书
2015/01/20 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
2016年优秀党务工作者先进事迹材料
2016/02/29 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python