小程序自定义侧滑删除组件

小程序提供了一个可移动视图容器movable-view；下面我来给大家介绍一个通过movable-view和movable-area组合编写的一个侧滑删除自定义组件。
先查看一下效果图：

5.gif

下面看一下布局：
slide-slip.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>

movable-areaz主要用来限制可视区域大小；movable-view整个滑动的view大小，
侧滑左边的默认展示内容区域

    <view class="slideslip-left" style="width: {{width}}rpx">
      <slot name="left"></slot>
    </view>

侧滑右边的默认隐藏区域

  <view class="slideslip-right" >
      <slot name="right"></slot>
    </view>

slide-slip.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,
      //   });
      // }
    }
  }
})

这里主要是计算手机像素和小程序rpx的换算率，然后重新设置左边整个可移动的视图的大小

slide-slip.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;
}

使用：

<slide-slip height="150" show="{{false}}">
  <view slot="left" class="sideslip-content">
    <view class="container" data-item="{{item}}" bindtap="onClickItem">
      <view class="title">{{item.title}}</view>
      <view class="bottom_container">
        <view class="number">共{{item.count}}条留言</view>
        <view class="number">{{item.look}}浏览</view>
        <button hover-class="none" data-item="{{item}}" open-type="share" catchtap="onClicShare">
          <image class="share" src="{{'/images/icon_share.png'}}" data-item="{{item}}"></image>
        </button>
      </view>
    </view>
  </view>
  <view slot="right" class="sideslip-oprate">
    <view class='sideslip-red' data-item="{{item}}" bindtap="onClickDelete">删除</view>
    <view class='sideslip-blue' data-item="{{item}}" bindtap="onClickEdit">编辑</view>
  </view>
</slide-slip>
<view class="line_10" wx:if="{{showLine}}"></view>

代码详细地址：https://github.com/fuxingkai/frankui-weapp