微信小程序实现卡片切换动画效果

index.wxml

<view class="xin">
<view class="title">你有一封新的信件</view>
<view class="border"></view>
<view class="xin-list" bindtouchend="moveItem" bindtouchstart="moveStart">
<block wx:for="{{xinList}}" wx:key="key" wx:for-index="idx">
<view class="single" style="opacity:{{item.display}};transform: translateX({{item.slateX}}) scale({{item.scale}});z-index:{{item.zIndex}};transform-origin: 100% 50% 0;{{item.style}}">
<view class="xin-shou">
致 {{item.to}}
</view>
<view class="xin-body">
{{item.msg}}
</view>
<view class="shenglue">···</view>
<view class="xin-xie">By {{item.from}}</view>
</view>
</block>
</view>
</view>

2.index.wxss

.xin{
     padding:0 20px;
}
.xin .title{
     font-size: 14px;
     color: #444;
}
.xin .border{
     height: 0;
     border-top: 1px solid #ccc;
     margin-top: 20px;
     width:20%;
}
.xin-list{
     width: 100%;
     position: relative;
}
.xin-list .single:nth-of-type(1){
     z-index: 10;
}
/* .xin-list .single:nth-of-type(2){
     position: absolute;
     transform: translateX(20px) scale(0.8);
     
     transform-origin: 100% 50% 0; 
     top: 0;
     z-index: -1;
}
.xin-list .single:nth-of-type(3){
     position: absolute;
     transform: translateX(40px) scale(0.6);
     
     transform-origin: 100% 50% 0; 
     
     top: 0;
     z-index: -2;
} 
*/
.xin-list .single:nth-of-type(n+4){
     
     transform:translateX(40px) scale(0.6);
     transform-origin: 100% 50% 0; 
}
.xin-list .single{
     transition: all 1s;
     overflow: hidden;
     border-radius: 1px;
     margin-top:15px;
     width: calc(100% - 60px);
     height: calc(100vh - 150px - 11vh);
     background: #fff;
     position: absolute;
     box-shadow: 3px 3px 10px 0px #777;
}
.xin-shou{
     writing-mode: vertical-lr;
     font-size: 15px;
     float: left;
     padding:10px 2px 10px 2px;
     letter-spacing:4px;
     margin:0 15px;
     position: relative;
     top: 50%;
     max-height: 80%;
     overflow: hidden;
     transform: translateY(-50%);
     border: 1px solid #999;
}
.xin-body{
     text-indent: 2em;
     letter-spacing:0.2em;
     writing-mode:vertical-lr;
     max-width:40vw;
     line-height:8vw;
     overflow: hidden;
     float: left;
     height: 70%;
     vertical-align: middle;
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     text-align:justify;
}
.shenglue{
     float: left;
     height: 70%;
     line-height:25px;
     width: 25px;
     text-align:justify;
     writing-mode:vertical-lr;
     margin-top: 23%;
     letter-spacing:10px;
}
.xin-xie{
     clear: both;
     font-size: 12px;
     position: absolute;
     right: 15px;
     bottom: 10px;
}

index.js

//index.js
var app = getApp();
//获取应用实例
 
Page({
     data: {
          userInfo: {},
          startX:0, //开始移动时距离左
          endX:0, //结束移动时距离左
          nowPage:0, //当前是第几个个页面
          xinList:[
               {
                    id:5,
                    from:'一路向南1',
                    to:'记得要微笑',
                    msg:'这么多年咨询信看下来s，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display:0,
                    scale:'',
                    slateX:'',
                    zIndex:0,
                    style:''
               },
               {
                    id: 5,
                    from: '一路向南2',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来s，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display:0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
               {
                    id: 5,
                    from: '一路向南3',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display:0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
               {
                    id: 5,
                    from: '一路向南4',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display:0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
               {
                    id: 5,
                    from: '一路向南5',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display: 0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
               {
                    id: 5,
                    from: '一路向南6',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display: 0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
               {
                    id: 5,
                    from: '一路向南7',
                    to: '记得要微笑',
                    msg: '这么多年咨询信看下来，让我逐渐明白一件事。 很多时候，咨询的人心里已经有了答案，来咨询只是想确认自己的决定是对的。 所以有些人读过回信后，会再次写信过来， 大概就是因为回答的内容和他的想法不一样。',
                    display: 0,
                    scale: '',
                    slateX: '',
                    zIndex: 0,
                    style: ''
               },
          ]
     },
     //事件处理函数
 
     onLoad: function (e) {
     
          this.checkPage(this.data.nowPage);
     },
     onReady: function () {
        
     },
     onShareAppMessage: function () {
          return {
               title: '解忧小酒馆，专治不开心~'
          }
     },
     //手指触发开始移动
     moveStart:function(e) {
          var startX = e.changedTouches[0].pageX;
          this.setData({
               startX:startX
          });
     },
     //手指触摸后移动完成触发事件
     moveItem: function (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 ){
     
               if(that.data.nowPage >= (that.data.xinList.length - 1)) {
                    wx.showToast({
                         title: '最后一封信了喔,明天再来吧',
                         icon: 'none'
                    })
                    return false;
               }
               that.setData({
                    nowPage:that.data.nowPage+1
               });
               this.checkPage(this.data.nowPage);
          }
          if(moveX < -20) {
               if (that.data.nowPage <= 0) {
                    wx.showToast({
                         title: '这是第一封信了喔',
                         icon: 'none'
                    })
                    return false;
               } 
               that.setData({
                    nowPage: that.data.nowPage - 1
               });
               this.checkPage(this.data.nowPage);
               
               // wx.showToast({
               //  title: '不可以回退噢',
               //  icon:'none'
               // })
          }
          
               
     },
     // 页面判断逻辑,传入参数为当前是第几页 
     checkPage:function(index) {
          //信列表数据
          var data = this.data.xinList;
          var that = this;
          var m = 1;
          for(var i = 0;i < data.length;i ++) {
               //先将所有的页面隐藏
               var disp = 'xinList[' + i + '].display';
               var sca = 'xinList[' + i + '].scale';
               var slateX = 'xinList[' + i + '].slateX';
               var zIndex = 'xinList[' + i + '].zIndex';
               var style = 'xinList[' + i + '].style';
               that.setData({
                    [disp]:0,
                    [style]: "display:block",
               });
               //向左移动上一个页面
               if(i == (index - 1) ){
                    that.setData({
                         [slateX]: '-120%',
                         [disp]: 1,
                         [zIndex]: 2,
                         
                    });
               }
               //向右移动的最右边要display:none的页面
               if (i == (index + 3)) {
                    that.setData({
                         [style]:'display:none',
                         [slateX]:'0',
                         [zIndex]: -10,
                    });
               }
               if(i == index || (i > index && (i < index + 3))) {
                    //显示最近的三封
                    that.setData({
                         [disp]:1
                    });
                    //第一封信
                    if(m == 1){
                         this.setData({
                              [sca]: 1,
                              [slateX]: 0,
                              [zIndex]: 1,
                         });
                    }
                    //第一封信
                    else if (m == 2) {
                         this.setData({
                              [sca]: 0.8,
                              [slateX]:'20px',
                              [zIndex]: -1,
                         });
                    }
                    //第三封信
                    else if (m == 3) {
                         this.setData({
                              [sca]: 0.6,
                              [slateX]: '40px',
                              [zIndex]: -2,
                         });
                    }
                    m ++;
               }
          
          }
     }
})