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

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

5.gif

下面看一下布局：
slide-slip.wxml

movable-areaz主要用来限制可视区域大小；movable-view整个滑动的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;
}

使用：

  
    
      {{item.title}}
      
        共{{item.count}}条留言
        {{item.look}}浏览
        
          
        
      
    
  
  
    删除
    编辑
  

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