小程左滑删除 slide-view（二）

上一篇小程序左滑删除 movable-view 和 moveable-area（一）已经讲过左滑删除的原理，代码写的比较简单。本篇主要看下第三方组件 slide-veiw左滑实现方式。

安装第三方 slide-view

1. 打开终端；
2. 定位到小程序中project.config.json同级目录，一般也是根目录:

cd miniprogram 

3. npm 初始化

npm init -y

• -y：即 yes，加上 -y 直接生成默认的 package.json 文件。如果不加 -y ，则会提示手动填写需要生成的 package.json 文件信息，一般按回车使用默认就可以，加上 -y 则简化了这一步。

项目初始化完成后，目录下面会自动生成一个 package.json 文件。接下来安装的所有模块及这个模块的版本信息，在这个文件中都有描述。

如果没有初始化，则在小程序构建 npm 时会提示找不到 npm 包的错误。

4. 安装 silde-view 组件

npm install --save miniprogram-slide-view

• --save：依赖包名称(miniprogram-slide-view)自动添加到 package.json 文件 dependencies 键下。如果不写 --save 则需要手动修改 package.json文件。

安装完成以后，在小程序项目目录下会多出来一个 node_modules 目录，这个目录是本地存放第三方组件源码的目录，所有下载的模块都在这个目录中。

5. 构建 npm

微信开发者工具 -> 工具 -> 构建 npm。

完成后，小程序目录下生成 miniprogram-npm目录。

这一步是将小程序编译时需要的文件(仅是编译时需要的文件，不是所有)，从 node_modules 目录下复制到 miniprogram-npm 目录下。

使用 slide-view

1. 在需要使用 slide-view 的页面 page.json 中添加 slide-view 自定义组件配置。

//.json文件
{
  "usingComponents": {
    "slide-view": "miniprogram-slide-view"
  }
}

WXML 文件中引用 slide-view：

<slide-view class="slide" width="750" height="100" slideWidth="300">
  <view class="left" slot="left">这里是插入到组内容</view>
  <view class="right" slot="right">
    <view class="read">已读</view>
    <view class="delete">删除</view>
  </view>
</slide-view>

slide-view 样式需要在 WXSS 中自定义：

.left {
  background-color: white;
  height: 100rpx;
  width: 750rpx;
  display: flex;
  flex-direction: row;
  color: grey;
  line-height: 100rpx;
}

.right {
  height: 100rpx;
  line-height: 100rpx; 
  display: flex;
  text-align: center;
  vertical-align: middle;
  
}

.read {
  background-color: #ccc;
  color: #fff;
  width: 150rpx;
}

.delete {
  background-color: red;
  color: #fff;
  width: 150rpx;
} 

slide-view 实现方式

查看第三方 slide-view 源码：

小程序目录node_modules -> miniprogram-slide-view -> src

WXML 文件：

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

slide-view 也是使用 movable-area 和 movable-view 组合实现的左滑删除。原理在小程序左滑删除 movable-view 和 moveable-area（一）这一篇讲过，slide-view 主要是加上了回弹效果。

JS文件：

    //  当滑动范围超过阈值自动完成剩余滑动
    onTouchEnd(e) {
      this._endX = e.changedTouches[0].pageX
      const {_endX, _startX, _threshold} = this
      if (_endX > _startX && this.data.out === false) return
      if (_startX - _endX >= _threshold) {
        this.setData({
          x: -this._slideWidth
        })
      } else if (_startX - _endX < _threshold && _startX - _endX > 0) {
        this.setData({
          x: 0
        })
      } else if (_endX - _startX >= _threshold) {
        this.setData({
          x: 0
        })
      } else if (_endX - _startX < _threshold && _endX - _startX > 0) {
        this.setData({
          x: -this._slideWidth
        })
      }
    },

这里的判断就是设置一个阈值，根据滑动结束touchend判断滑动的距离是否超过了阈值，如果超过阈值，则左滑，没有超过阈值，则回弹。

阈值的取值：左滑按钮宽度的一半that._threshold = res.width / 2，源代码如下：

    updateRight() {
      // 获取右侧滑动显示区域的宽度
      const that = this
      const query = wx.createSelectorQuery().in(this)
      query.select('.right').boundingClientRect(function (res) {
        that._slideWidth = res.width
        that._threshold = res.width / 2  //这里是阈值
        that._viewWidth = that.data.width + res.width * (750 / _windowWidth)
        that.setData({
          viewWidth: that._viewWidth
        })
      }).exec()
    },

这是这个组件的实现并不复杂，也是基于小程序官方的可移动区域组件movable-area和movable-view实现的。

微信团队提供一个更好的实现方式：WeUI 组件库中的 Slideview，没有使用可移动区域组件实现，直接使用的 view 视图容器实现。并且 WeUI 组件库采用扩展声明的方式，直接在小程序中使用，不占用小程序有限的代码包大小，详见小程序左滑删除 WeUI 中 Slideview（三）。

相关文章：

1. 小程序左滑删除 movable-view 和 moveable-area（一）
2. 小程序左滑删除 WeUI 中 Slideview（三）