swiper填坑，swiper遮罩层，触发swiper中每个item元素事件

swiper填坑，解决禁用swiper滑动，在swiper上放遮罩层，也想触发swiper中每一个item元素的单击事件 - 已解决

我们知道，当使用swiper的时候，总会有一些特殊的需求，例如叮咚买菜的今日疯抢模块，是一个swiper轮播。

但是当我们使用swiper的时候发现，我们禁用swiper的滑动事件，此时就会出现一个问题，我们在swiper中无法滑动页面

在预期效果中，我们禁用swiper滑动事件，应该会触发页面的滑动事件，但是使用catchtouchmove禁用却连页面都不会移动

此时，我们就想到用一个遮罩层盖住这个swiper，那么我们滑动的只是遮罩层，如此便可以触发页面滚动了

但是有存在一个问题，这是当swiper中不需要有事件交互的时候可以这样做，如果swiper中存在事件交互如何解决？

本篇文章将详细介绍如何解决点击swiper上面的遮罩层触发内部的item

• wxml

  <view>
    <!--swiper容器-->
    <swiper class="swiperWrap">
      <swiper-item class="swiperItem">
        <view wx:for="{{4}}" class="item">{{item}}</view>
      </swiper-item>
    </swiper>
     <!--遮罩层-->
    <view class="mask" bind:tap="click"></view>
  </view>
  

• wxss

  /* pages/swiper/swiper.wxss */
  ​
  .mask{
    width: 750rpx;
    height: 200rpx;
    position: absolute;
    left: 0;
    top: 0;
  }
  .swiperWrap{
    width: 750rpx;
    height: 200rpx;
    background-color: #bfa;
  }
  .swiperItem{
    display: flex;
  ​
  }
  .item{
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
  }
  

• js

  // pages/swiper/swiper.js
  Page({
    data: {
  ​
    },
    // 遮罩层点击事件，获取当前用户点击的位置信息
    click(e) {
      // 当前点击的坐标
      let currentPosition = e.detail.x
      // 调用容器坐标获取每一个item的坐标组
      this.getSwiperItemPosition().then(res => {
        res.forEach((item,index)=>{
            // 根据判断当前点击的x坐标在集合中哪个item的left到right的范围内
          if(currentPosition>item.left&&currentPosition<item.right){
             // 结果就是哪一块
            console.log(index);
            // 业务逻辑操作
          }
        })
      })
    },
  // 封装一个函数，用来获取并返回每个item的坐标集合
    getSwiperItemPosition() {
        // 因为createSelectorQueryAPI是一个异步的，我们需要用promise转化
      let positionPromise = new Promise(async (resolve, reject) => {
        let positionArr = [];
        let query = wx.createSelectorQuery();
        query.selectAll('.item').boundingClientRect(res => {
          res.forEach(item => {
            positionArr.push({
              left: item.left,
              right: item.right
            })
          })
          resolve(positionArr)
        }).exec();
      })
      // 将promise对象返回，此时promise对象中包含一组集合，每个item的left和right
      return positionPromise
    },
  ​
  })