上一篇小程序左滑删除 movable-view 和 moveable-area（一）已经讲过左滑删除的原理，代码写的比较简单。本篇主要看下第三方组件 slide-veiw左滑实现方式。
安装第三方 slide-view
- 打开终端；
- 定位到小程序中
project.config.json同级目录，一般也是根目录:
cd miniprogram
- npm 初始化
npm init -y
-
-y：即yes，加上-y直接生成默认的package.json文件。如果不加-y，则会提示手动填写需要生成的package.json文件信息，一般按回车使用默认就可以，加上-y则简化了这一步。
项目初始化完成后，目录下面会自动生成一个 package.json 文件。接下来安装的所有模块及这个模块的版本信息，在这个文件中都有描述。
如果没有初始化，则在小程序构建 npm 时会提示找不到 npm 包的错误。
- 安装
silde-view组件
npm install --save miniprogram-slide-view
-
--save：依赖包名称(miniprogram-slide-view)自动添加到package.json文件dependencies键下。如果不写--save则需要手动修改package.json文件。
安装完成以后，在小程序项目目录下会多出来一个 node_modules 目录，这个目录是本地存放第三方组件源码的目录，所有下载的模块都在这个目录中。
- 构建 npm
微信开发者工具 -> 工具 -> 构建 npm。
完成后，小程序目录下生成 miniprogram-npm目录。
这一步是将小程序编译时需要的文件(仅是编译时需要的文件，不是所有)，从 node_modules 目录下复制到 miniprogram-npm 目录下。
使用 slide-view
- 在需要使用
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（三）。
