# wechat-app-LeftSlide
微信小程序仿微信, QQ 向左滑动删除操作。
## 废话不多说, 先看效果, 能满足您的需求, 您在接着往下看。
![](./images/gif.gif)
本人比较懒, 删除动作有点太生硬, 实在看不惯的同学可以加个动画上去。
### OK 下面来看代码
#### 首先是 wxml 里面绑定事件
``` html
<view class="item-wrapper">
<view class="item-list" wx:for="{{itemData}}" wx:for-item="item" wx:for-index="index" wx:key="that">
<view class="item-info" data-index="{{index}}" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="left:{{item.left + 'rpx'}}">
<image class="info-img" src="{{item.img}}"></image>
<view class="info-wrapper">
<view class="info-desc">
<view class="name">{{item.name}}</view>
<view class="time">{{item.time}}</view>
</view>
<view class="info-content">{{item.info}}</view>
</view>
</view>
<view class="item-oper">
<view class="oper-delete" bindtap="itemDelete" data-index="{{index}}">删除</view>
</view>
</view>
</view>
```
主要就是用的小程序的 touch 事件来进行处理
样式就不说了, 可以自己写, 不想写的同学也可以拿来直接用。
#### 然后就是事件的处理函数了
``` javascript
touchS: function (e) { // touchstart
let startX = App.Touches.getClientX(e)
startX && this.setData({ startX })
},
touchM: function (e) { // touchmove
let itemData = App.Touches.touchM(e, this.data.itemData, this.data.startX)
itemData && this.setData({ itemData })
},
touchE: function (e) { // touchend
const width = 150 // 定义操作列表宽度
let itemData = App.Touches.touchE(e, this.data.itemData, this.data.startX, width)
itemData && this.setData({ itemData })
},
itemDelete: function(e){ // itemDelete
let itemData = App.Touches.deleteItem(e, this.data.itemData)
itemData && this.setData({ itemData })
},
```
事件函数主演也是 touch 的三个事件还有删除事件, 每个事件的核心是更新数据, 也就是 setData()
#### 数据处理函数
数据处理的函数我单独拿了出来, 这样有利于复用。 放在 utils 文件夹下的 Touches.js 文件里面
``` javascript
touchM(e, dataList, startX) { // touchmove 过程中更新列表数据
let list = this._resetData(dataList)
list[this._getIndex(e)].left = this._getMoveX(e, startX)
return list
}
touchE(e, dataList, startX, width) { // touchend 更新列表数据
let list = this._resetData(dataList)
let disX = this._getEndX(e, startX)
let left = 0
if (disX < 0) { // 判断滑动方向, (向左滑动)
// 滑动的距离大于删除宽度的一半就显示操作列表 否则不显示
Math.abs(disX) > width / 2 ? left = -width : left = 0
} else { // 向右滑动复位
left = 0
}
list[this._getIndex(e)].left = left
return list
}
deleteItem(e, dataList) { // 删除功能
dataList.splice(this._getIndex(e), 1)
return dataList
}
```
每个函数都有注释说明, 相信都能看得懂, 就不多解释了。
有什么更好的方法, 或建议欢迎提出。 感觉本轮子还可以欢迎 Star 。
[微信小程序仿微信, QQ 向左滑动删除操作](https://github.com/songzeng2016/wechat-app-LeftSlide)
[微信小程序 自定义tabbar](https://github.com/songzeng2016/wechat-app-tabbar)
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序仿微信, QQ 向左滑动删除操作。.zip
共18个文件
png:7个
js:4个
wxss:2个
需积分: 1 0 下载量 48 浏览量
2024-01-07
21:06:52
上传
评论
收藏 1.9MB ZIP 举报
温馨提示
小程序,轻量级设计,无需下载安装,即开即用,释放手机内存压力,轻松应对日常各种需求。无论是购物支付、信息查询,还是休闲娱乐、生活服务,我们都一应俱全,满足您的多元化需求。 丰富功能,贴心体验。无论您是追求效率的工作达人,还是热爱生活的品质人群,在这里都能找到属于您的独特价值。指尖轻触,尽享智能科技带来的美好生活。
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序仿微信, QQ 向左滑动删除操作。.zip (18个子文件)
open_weixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcxxxxxxxxxxxxcxvcvcv
pages
leftSlide
mock.js 2KB
leftSlide.wxml 885B
leftSlide.wxss 1KB
leftSlide.js 1KB
leftSlide.json 50B
app.json 237B
app.js 821B
utils
Touches.js 2KB
app.wxss 204B
images
mp3.png 534B
txt.png 239B
gif.gif 1.93MB
word.png 569B
ppt.png 408B
excel.png 269B
pdf.png 525B
img.png 482B
README.md 4KB
共 18 条
- 1
资源评论
极致人生-010
- 粉丝: 3164
- 资源: 3077
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功