微信小程序侧滑删除组件
> wxml
```html
<view class="container" >
<view class="slide-box"
style="transform: translateX(-{{translateX}}rpx);transition: transform .8s "
bindtouchstart="handleTouchStart"
bindtouchmove="handleTouchMove"
bindtouchend="handleTouchEnd"
>
<view class="slide-left" >
<slot name="slideLeft"></slot>
</view>
<view class="slide-right" style="width:{{slideWidth}}rpx">
<slot name="slideRight"></slot>
</view>
</view>
</view>
```
> js
```javascript
Component({
options: {
multipleSlots: true,
},
properties: {
slideWidth: { // 右侧滑块的width
type: Number,
value: 0,
},
},
data: {scroll: true, touches: [], translateX: 0},
methods: {
/* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
handleAngle(start, end) {
var _X = end.clientX - start.clientX;
var _Y = end.clientY - start.clientY;
// 返回角度 /Math.atan()返回数字的反正切值
return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
},
// 触摸开始
handleTouchStart(e) {
const {touches} = e;
// @touches typeof Array
// touches.length 手指触摸屏幕的个数
this.data.scroll = touches.length === 1;
this.data.touches = e.touches;
},
handleTouchMove(e) {
if (this.data.scroll) {
// 滑滑动的角度
let angle = this.handleAngle(this.data.touches[0], e.touches[0]);
// 滑滑动的角度 如果 > 30 不做操作
if (Math.abs(angle) > 40) return;
// PosX 手指在X轴的坐标差 判断滑动方向
let PosX = e.touches[0].pageX - this.data.touches[0].pageX;
// PosX < -50 => Left 左滑
// PosX > 50 => Right 右滑
if (PosX < -50) {
this.setData({
translateX: this.properties.slideWidth,
});
}
else if (PosX > 50) {
this.setData({
translateX: 0,
});
}
}
},
// 触摸结束
handleTouchEnd(e) {
this.data.scroll = false;
},
},
pageLifetimes: {
// 组件所在页面的生命周期函数
hide: function () {
this.setData({
translateX: 0,
});
},
},
});
```
> wxs
```css
.container{
position: relative;
padding: 0;
overflow: hidden;
}
.container .slide-box{
position: relative;
min-height: 40rpx;
}
.slide-right{
position: absolute;
top: 0;
bottom: 0;
left: 100%;
}
```
> json
```json
{
"component": true
}
```
博客描述
模拟微信好友列表，左滑删除，置顶的功能