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


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 全面解析各种浏览器网页中的JS 执行顺序
Feb 17 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
JS 使用for循环遍历子节点查找元素
Sep 06 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
使用JS判断移动端手机横竖屏状态
Jul 30 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
VUE前后端学习tab写法实例
Aug 06 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+MYSQL的文章管理系统(一)
2006/10/09 PHP
在PHP语言中使用JSON和将json还原成数组的方法
2016/07/19 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
jquery 插件开发备注
2010/08/27 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
node跨域请求方法小结
2017/08/25 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
2017/11/08 jQuery
Node.js实现简单的爬取的示例代码
2019/06/25 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
python使用wxpython开发简单记事本的方法
2015/05/20 Python
[原创]教女朋友学Python3(二)简单的输入输出及内置函数查看
2017/11/30 Python
python的dataframe转换为多维矩阵的方法
2018/04/11 Python
python模块smtplib学习
2018/05/22 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
护理专科学生自荐书
2014/07/05 职场文书
党员作风建设自查报告
2014/10/23 职场文书
2014年技术部工作总结
2014/12/12 职场文书
推荐信范文大全
2015/03/27 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电