初识小程序-滑动单元格

滑动单元格点击页面空白、切换页面、点击其他滑动单元格，滑块不会自动收起，为解决该问题进行封装 获取每一个滑动单元格的实例 执行滑动单元格关闭方法

// behavior/swipeCell
export const swipeCellBehavior = Behavior({
  data:{
   swipeCellQueue:[], // 存储滑动单元格实例 
  },
  methods:{
      // 关闭滑块
  onSwipeCellCommonClick(){
    // 对单元格数组进行遍历，获取每一个实例
    // 获取实例调用close方法即可
    this.data.swipeCellQueue.forEach(instance=>{
      instance.close();
    })
    // 将滑动单元格数组清空
    this.data.swipeCellQueue=[];
   },
   // 点击滑动单元格时触发的事件
   onSwipeCellClick(){
     this.onSwipeCellCommonClick();
   },
   // 页面绑定事件
   onSwipeCellPage(){
    this.onSwipeCellCommonClick();
   },
   swipeCellOpen(event){
     // 获取单元格实例
     const instance = this.selectComponent(`#${event.target.id}`);
     // 将实例追加到数组中
     this.data.swipeCellQueue.push(instance)
   },
  }
})

// page
import { swipeCellBehavior } from "../../behavior/swipeCell";
Page({
  behaviors:[swipeCellBehavior],
  ......

// wxml
<view bind:tap="onSwipeCellPage" class="SwipeCellPage">
  <van-swipe-cell class="van-swipe-cell" id="swipe-cell-{{item.id}}" wx:for="{{swipeCells}}" bind:open="swipeCellOpen" wx:key="id" bind:click="onSwipeCellClick" right-width="{{ 65 }}" left-width="{{ 65 }}">
    <view slot="left" class="van-swipe-cell__left">选择</view>
    <view class="context">内容</view>
    <view slot="right" class="van-swipe-cell__right">删除</view>
  </van-swipe-cell>
</view>