index.wxml文件
| <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> |
| <view class="content"> |
| <view style="{{item.txtStyle}}" class='item' data-index='{{index}}' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchE"> |
| <view class='title'>{{item.title}}</view> |
| <text>{{item.create_time}}</text> |
| </view> |
| </view> |
| |
| <view class="del" data-id="{{item.id}}" catchtap="delBtn" data-index="{{index}}">删除</view> |
| </view> |
index.wxss文件
| .touch-item { |
| display: flex; |
| justify-content: space-between; |
| width: 100%; |
| overflow: hidden; |
| margin-bottom: 10rpx; |
| background: #f5f5f5; |
| height: 216rpx; |
| } |
| |
| .content { |
| width: 100%; |
| margin-right: 0; |
| -webkit-transition: all 0.4s; |
| transition: all 0.4s; |
| -webkit-transform: translateX(90px); |
| transform: translateX(90px); |
| margin-left: -90px; |
| } |
| |
| .del { |
| width: 90px; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| color: #fff; |
| -webkit-transform: translateX(90px); |
| transform: translateX(90px); |
| -webkit-transition: all 0.4s; |
| transition: all 0.4s; |
| font-size: 35rpx; |
| } |
| |
| .touch-move-active .content, .touch-move-active .del { |
| -webkit-transform: translateX(0); |
| transform: translateX(0); |
| } |
index.js文件
| |
| Page({ |
| |
| |
| |
| |
| data: { |
| startX: 0, |
| startY: 0, |
| page: 1, |
| list:[ |
| { |
| id:0, |
| title:'标题1', |
| create_time:'2019-09-06' |
| }, { |
| id: 1, |
| title: '标题2', |
| create_time: '2019-09-06' |
| }, { |
| id: 2, |
| title: '标题3', |
| create_time: '2019-09-06' |
| }, |
| ] |
| }, |
| touchE: function (e) { |
| |
| var that = this |
| if (e.changedTouches.length == 1) { |
| |
| var endX = e.changedTouches[0].clientX; |
| |
| var disX = that.data.startX - endX; |
| var delBtnWidth = that.data.delBtnWidth; |
| |
| var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx"; |
| |
| |
| var index = e.currentTarget.dataset.index; |
| var list = that.data.list; |
| list[index].txtStyle = txtStyle; |
| |
| that.setData({ |
| list: list |
| }); |
| } |
| }, |
| |
| touchstart: function (e) { |
| |
| this.data.list.forEach(function (v, i) { |
| if (v.isTouchMove) |
| v.isTouchMove = false; |
| }) |
| this.setData({ |
| startX: e.changedTouches[0].clientX, |
| startY: e.changedTouches[0].clientY, |
| list: this.data.list |
| }) |
| }, |
| |
| touchmove: function (e) { |
| var that = this, |
| index = e.currentTarget.dataset.index, |
| startX = that.data.startX, |
| startY = that.data.startY, |
| touchMoveX = e.changedTouches[0].clientX, |
| touchMoveY = e.changedTouches[0].clientY, |
| |
| angle = that.angle({ |
| X: startX, |
| Y: startY |
| }, { |
| X: touchMoveX, |
| Y: touchMoveY |
| }); |
| that.data.list.forEach(function (v, i) { |
| v.isTouchMove = false |
| |
| if (Math.abs(angle) > 30) return; |
| if (i == index) { |
| if (touchMoveX > startX) |
| v.isTouchMove = false |
| else |
| v.isTouchMove = true |
| } |
| }) |
| |
| that.setData({ |
| list: that.data.list |
| }) |
| }, |
| |
| |
| |
| |
| |
| angle: function (start, end) { |
| var _X = end.X - start.X, |
| _Y = end.Y - start.Y |
| |
| return 360 * Math.atan(_Y / _X) / (2 * Math.PI); |
| }, |
| |
| |
| }) |

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)