微信小程序封装左滑删除的组件

1. 在components文件夹中创建 slider文件，并在文件中创建Slider组件
2. wxml

 <movable-area class="_sideslip" style="width: {{width}}rpx; height: {{height}}rpx;">
  <movable-view direction="horizontal" class="_sideslip--movable" out-of-bounds="{{out}}" damping="20" x="{{x}}" style="width: {{width + slideWidth}}rpx; height: {{height}}rpx;" inertia bindchange="bindchange">
    <view class="slideslip-left" style="width: {{width}}rpx">
      <slot name="left"></slot>
    </view>
    <view class="slideslip-right" >
      <slot name="right"></slot>
    </view>
  </movable-view>
</movable-area>

3. wxss

._sideslip {
  overflow: hidden;
}
._sideslip--movable {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}
.slideslip-left {
  flex-shrink: 0;
}
.slideslip-right {
  display: flex;
  flex-shrink: 0;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
}

4. js

// components/slider/Slider.js
Component({
  options: {
    multipleSlots: true
  },
  properties: {
    //  组件显示区域的宽度 (rpx)
    width: {
      type: Number,
      value: 750 // 750rpx 即整屏宽
    },
    //  组件显示区域的高度 (rpx),必填项
    height: {
      type: Number,
      value: 0
    },
    //  组件滑动显示区域的宽度 (rpx)
    slideWidth: {
      type: Number,
      value: 0
    },
    // 是否允许惯性越界
    out: {
      type: Boolean,
      value: true
    },
    
  },

  data: {
    x:0,
  },

  ready() {
    const info = wx.getSystemInfoSync()
    let rate = info.screenWidth / 750;
    let params = {}
    const query = wx.createSelectorQuery().in(this)
    query
      .select('.slideslip-right')
      .boundingClientRect(res => {
        this.setData({
          slideWidth: res.width / rate
        });
      })
      .exec()
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () {
      this.setData({
        x: 0,
      });
     },

  },
  methods: {
    
    bindchange(e) {
      // if (this.data.x==0){
      //   this.setData({
      //     x: 1,
      //   });
      // }
    }
  }
})

5. json

{
  "component": true,
  "usingComponents": {}
}

使用：