微信小程序实现遮罩层删除效果

效果图

wxml页面结构

<view class="hot-recipe-list" wx:else>
          <block wx:for="{{ recipes }}" wx:key="id">
            <view class="hot-recipe-list-item" bindlongpress="_delStyle" data-index="{{ index }}" >
              <!-- 内容区域 -->
              <view>
                <!-- 图片 -->
                <image src="{{ item.src }}"></image>
                <!-- 名字 -->
                <view class="hot-recipe-list-item-title">{{ item.recipeName }}</view>
                <!-- 发布人及浏览次数 -->
                <view class="hot-recipe-list-item-info">
                  <view class="left">
                    <image src="../../imgs/users.png"></image>
                    <text>放风筝的人</text>
                  </view>
                  <view class="right">
                    <image src="../../imgs/airs.png"></image>
                    <text>11321</text>
                  </view>
                </view>
              </view>

              <!-- 遮罩层区域 -->
              <view class="cover" style="opacity: {{ item.opacity }};">
                 <mp-icon bindtap="_doDelete" data-index="{{ index }}" size="30" color="#fff" icon="delete"></mp-icon>
              </view>

            </view>

          </block>
        </view>

js逻辑文件

	Page({
		data:{
			recipes: [{
		        id: "1",
		        recipeName: "烤苏格兰蛋",
		        src: "../../imgs/1.jpg",
		        opacity: 0, //遮罩层默认不显示
		      },
		      {
		        id: "2",
		        recipeName: "法国甜点",
		        src: "../../imgs/2.jpg",
		        opacity: 0, //遮罩层默认不显示
		      },
		    ],
		},
		// 处理遮罩层显示问题
		  _delStyle(e) {
		    // 获取索引
		    let index = e.currentTarget.dataset.index;
		    // 将所有的列表都设置不显示
		    this.data.recipes.map((item) => {
		      item.opacity = 0;
		    })
		    // 将长按的列表项设置为选中
		    this.data.recipes[index].opacity = 1;
		    this.setData({
		      recipes: this.data.recipes
		    })
		    
		  },
		  // 执行删除操作
		  _doDelete(e){
		    let index = e.currentTarget.dataset.index;
		    let _this = this;
		    wx.showModal({
		       title:"删除提示",
		       content:"您确定删除么？",
		       success(res){
		            if(res.confirm){
		              //执行删除
		              console.log('执行删除')
		            }else{
		              //取消删除
		              _this.data.recipes[index].opacity = 0;
		              _this.setData({
		                recipes: _this.data.recipes
		              })
		            }
		       }
		    })
		  }
	})

wxss样式文件

	.hot-recipe-list{
	  background-color: #f9f8f7;
	  padding: 0rpx 40rpx;
	  display: flex;
	  flex-wrap: wrap;
	  justify-content: space-between;
	}
	
	/* 菜谱列表 */
	.hot-recipe-list-item{
	  width: 320rpx;
	  height: 448rpx;
	  background-color: #fff;
	  margin-top: 26rpx;
	  border-top-left-radius: 20rpx;
	  border-top-right-radius: 20rpx;   
	
	  /* 加遮罩层操作 -- 父元素相对定位 */
	  position: relative;
	}
	
	/* 遮罩层开始 */
	.cover{
		/* 子元素绝对定位*/
	   position: absolute;  
	   top: 0;
	   left: 0;
	   width: 320rpx;
	   height: 448rpx;
	   border-top-left-radius: 20rpx;
	   border-top-right-radius: 20rpx;   
	   background-color: rgba(0, 0, 0, 0.6);
	   text-align: center;
	   line-height: 448rpx;
	   transition: opacity 1s;
	}
	/* 遮罩层结束 */
	
	.hot-recipe-list-item image{
	  width: 100%;
	  height: 330rpx;
	  border-top-left-radius: 20rpx;
	  border-top-right-radius: 20rpx;  
	}
	.hot-recipe-list-item-title{
	  height: 70rpx;
	  width: 100%;
	  font-size: 16px;
	  line-height: 70rpx;
	  padding-left: 18rpx;
	}
	.hot-recipe-list-item-info{
	  display: flex;
	  padding: 0px  18rpx;
	  justify-content: space-between;
	  align-items: center;
	  color: #bdbdbd;
	}
	.hot-recipe-list-item-info .left{
	  font-size: 14px;
	  display: flex;
	  align-items: center;
	}
	.hot-recipe-list-item-info .right{
	  font-size: 12px;
	  display: flex;
	  align-items: center;
	}
	
	.hot-recipe-list-item-info .left image{
	  width: 30rpx;
	  height: 30rpx;
	}
	
	.hot-recipe-list-item-info .right image{
	  width: 27rpx;
	  height: 16rpx;
	}

注意：本文仅供参考！！！，拒绝转载