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

以你之姓@ 2021-11-23 09:20 330阅读 0赞

小程序提供了一个可移动视图容器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大小，  
侧滑左边的默认展示内容区域

侧滑右边的默认隐藏区域

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][https_github.com_fuxingkai_frankui-weapp]

[5.gif]: /images/20211122/075fb3c55dbf4f16adcbece7d1f6a8e5.png
[https_github.com_fuxingkai_frankui-weapp]: https://github.com/fuxingkai/frankui-weapp