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

更新时间：2022年05月23日 16:59:36 作者：haicome

这篇文章主要为大家详细介绍了微信小程序实现卡片层叠滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现卡片层叠滑动的具体代码，供大家参考，具体内容如下

实现效果：

1.左右滑动时，向相应方向移动一个卡片位置；
2.点击某一项时，将点击项位置移动到中间位置；

代码如下：

wxml：

<view class="teachers_banner">
  <view class="container clearfix teachers_b">
    <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
      <ul>
        <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}}" alt="林奇涵" title=""></image>
          </li>
        </block>
      </ul>

    </view>
  </view>
</view>

css：

/* index/gun/jsSwiper2/jsSwiper2.wxss */
/*轮播图片*/
.teachers_banner{
    width:100%;
    height:575px;
    /* background: url(../images/teachers_banner.jpg) no-repeat center top; */
    background-size: cover;
     position: relative;
    overflow: hidden;
}
.teachers_b{
  position:relative;
  margin-top:130px;
}
#slide {
    margin: 0 auto;
    width: 100%;
    height: 330px;
    position: relative;
  }

  image{
    width: 200rpx;
    height: 200rpx;

  }

#slide li {
    position: absolute;
    width:200rpx;
    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 img {
    width: 100%;
    height: 100%;
}
.slide_left{
 /* width:240px;*/
}
.slide_right{
 /* width:440px;*/
  padding: 40px;
  -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}
.slide_right h3{
font: 400 30px/18px "Microsoft Yahei";
color:#222222;
}
.slide_right h3 span{
  display:inline-block;
  margin-left:10px;
  font: 400 14px/36px "Microsoft Yahei";
color:#555555;
}
.slide_right p{
  padding:20px 0 30px;
  color:#555555;
    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: .7;
}

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/teacher01.jpg",
        animation: null
      },
      {
        id: 2,
        zIndex: 4,
        opacity: 0.4,
        left: 80,
        iamge: "../images/teacher02.jpg",
        animation: null
      },
      {
        id: 3,
        zIndex: 6,
        opacity: 0.6,
        left: 120,
        iamge: "../images/teacher03.jpg",
        animation: null
      },
      {
        id: 4,
        zIndex: 8,
        opacity:1,
        left: 160,
        iamge: "../images/teacher04.jpg",
        animation: null
      },
      {
        id: 5,
        zIndex: 6,
        opacity: 0.6,
        left: 200,
        iamge: "../images/teacher05.jpg",
        animation: null
      },
      {
        id: 6,
        zIndex: 4,
        opacity: 0.4,
        left: 240,
        iamge: "../images/teacher06.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();
    }
  },
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ES11屡试不爽的新特性,你用上了几个
这篇文章主要介绍了ES11屡试不爽的新特性,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-10-10
js控制表单不能输入空格的小例子
这篇文章主要介绍了js控制表单不能输入空格的小例子，有需要的朋友可以参考一下
2013-11-11
基于JS判断iframe是否加载成功的方法(多种浏览器）
这篇文章主要介绍了基于JS判断iframe是否加载成功的方法【多种浏览器】的相关资料,需要的朋友可以参考下
2016-05-05
input 宽度自适应
感谢网友“liufabin”提出的关于不支持FF的问题，第一个在FF下经过测试时支持的，第二个中的高度自适应不支持，我在网上找了一个JQUERY的插件
2009-05-05
js动态添加input按钮并给按钮增加onclick的函数事件(带参数)完整实例
这篇文章主要介绍了js动态添加input按钮并给按钮增加onclick的函数事件,结合完整实例形式分析了javascript页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2023-07-07
D3.js实现树形图的绘制教程详解
树形图（Tree Diagram）是用来表示一个概率空间。树形图可以表示独立事件（例如多次掷硬币）和条件概率（例如不放回的抽卡）。本文将利用D3.js实现树形图的绘制，需要的可以参考一下
2022-11-11
js实现简单随机抽奖的方法
这篇文章主要介绍了js实现简单随机抽奖的方法,涉及字符串的操作、setInterval定时调用等技巧,需要的朋友可以参考下
2015-01-01
Textarea与懒惰渲染实现代码
2008年有啊第一次性能优化时，我们曾用textarea来存贮需要懒惰渲染的节点
2012-01-01
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
这篇文章主要介绍了jQuery animate()实现背景色渐变效果的处理方法,结合实例形式分析了jQuery颜色插件jquery.color.js实现背景色渐变的简单操作技巧,需要的朋友可以参考下
2017-03-03
纯javascript判断查询日期是否为有效日期
很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下
2015-08-08

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具