在微信小程序中实现左右滑动切换图片并且加遮罩层实现代码

在微信小程序中实现左右滑动切换图片并且加遮罩层思路以及实现代码

布局：

```html
<view class="imgsCon"  bindtouchend="moveItem" bindtouchstart="moveStart">
      <block wx:for="{{newEast}}" wx:key="{{index}}">
          <image class="single" src="../../images/card.jpg" style="transform: translateX({{item.slateX}}) scale({{item.scale}});z-index:{{item.zIndex}};transform-origin: 100% 50% 0;{{item.style}}"/>
          <view class="mask" src="../../images/card.jpg" style="opacity:{{item.opacity}};transform: translateX({{item.slateX}}) scale({{item.scale}});z-index:{{item.zIndex}};transform-origin: 100% 50% 0;{{item.style}}"></view>
      </block>
    </view>

## 样式：

```css
.imgsCon{
  width: 100%;
  position: relative;
}
.single,.mask{
  transition: all 1s;
  overflow: hidden;
  margin-top: 15px;
  width: calc(100% - 100px);
  height: calc(100vh - 400px);
  position: absolute;
  transform: translateX(400px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 1;
  /* box-shadow: 3px 3px 10px 0px #777777; */
}
.mask{
  opacity: 0.8;
  background-color: grey;
}
page{
  background: #f7f7f7f7;
 }
 .imageContainer{
  width: 100%;
  height: 500rpx;
  background: #000;
 }
 .item{
  height: 500rpx;
 }
 .itemImg{
  position: absolute;
  width: 100%;
  height: 380rpx;
  border-radius: 15rpx;
  z-index: 5;
  opacity: 0.7;
  top: 13%;
 }
 .active{
  opacity: 1;
  z-index: 10;
  height: 430rpx;
  top: 7%;
  transition:all .2s ease-in 0s;
 }
.mask:nth-of-type(1){
  position: absolute;
  transform: translateX(0) scale(1);
  transform-origin:100% 50% 0;
  opacity: 0;
  z-index: 100;
}
.mask:nth-of-type(2){
  position: absolute;
  transform: translateX(50px) scale(0.9);
  transform-origin:100% 50% 0;
  opacity: 0.6;
  top: 0;
  z-index: 10;
}
.mask:nth-of-type(3){
  position: absolute;
  transform: translateX(105px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 0.6;
  top: 0;
  z-index: 0;
}
.imgsCon .single:nth-of-type(1){
  position: absolute;
  transform: translateX(0) scale(1);
  transform-origin:100% 50% 0;
  opacity: 1;
  z-index: 50;
}
.imgsCon .single:nth-of-type(2){
  position: absolute;
  transform: translateX(50px) scale(0.9);
  transform-origin:100% 50% 0;
  opacity: 1;
  top: 0;
  z-index: 5;
}
.imgsCon .single:nth-of-type(3){
  position: absolute;
  transform: translateX(105px) scale(0.8);
  transform-origin:100% 50% 0;
  opacity: 1;
  top: 0;
  z-index: -5;
}

 xinlist:[
      {
        text:'111111'
      },
      {
        text:'2222'
      },
      {
        text:'3333'
      },
      {
        text:'4444'
      },
      {
        text:'5555uuuuuuu'
      },
      {
        text:'6666'
      },
      {
        text:'6666'
      },
      {
        text:'6666'
      },
      {
        text:'6666'
      },
      {
        text:'6666'
      }
    ],
    newEast:[],//存放图片的数据
    maskList:[],//存放遮罩层的数据
    startX:0,//手指开始移动的距离
    endX:0,//手指移动
    nowPage:0,//当前是第几个div
    //函数部分
    //处理滑动函数
  checkPage:function(index) {
    console.log(this.data.nowPage)
    var data=this.data.newEast;
    var that=this;
    var m=1;
    for(let i=0;i<data.length;i++){
      var opa='newEast['+i+'].opacity';
      var sca='newEast['+i+'].scale';
      var slateX='newEast['+i+'].slateX';
      var zIndex='newEast['+i+'].zIndex';
      that.setData({
        [opa]:0
      })
      //第一次向左滑动时将图片放在左侧
      if(i==(index-1)){
        that.setData({
          [slateX]:'-120%',
          [sca]:1,
          [opa]:0,
          [zIndex]:12
        })
      }
      //其他未出现的图片
      if((i-index)>=3){
        that.setData({
          [slateX]:'120%',
          [zIndex]:-10,
          [opa]:0
        })
      }
      //移动的下一张图片的位置
      if(i==index||(i>index&&(i<index+3))){
        if(m==1){
        that.setData({
          [opa]:0,
          [sca]:1,
          [slateX]:0,
          [zIndex]:10
        })
        }
        else if(m==2){
          that.setData({
            [opa]:0.8,
            [sca]:0.9,
            [slateX]:'58px',
            [zIndex]:-1
          })
        }
        else if(m==3){
          that.setData({
            [opa]:0.6,
            [sca]:0.8,
            [slateX]:'111px',
            [zIndex]:-2
          })
        }
        m++
      }
    }
  },
  //给每个数据项加上相应的属性
   additem:function() {
    var newlist=[];//存放处理后的数组
    var list=this.data.xinlist;
    list.map((item,index)=>{
      newlist.push(
        Object.assign(item,{disp:0},{slateX:0},{scale:''},{zIndex:-index})
      )
    })
    this.setData({
      newEast:newlist
    });
  },

别忘了在onload中调用additem函数哟！！！！