微信小程序中左滑可以删除操作的功能怎样做？

发布时间：2022-11-14 11:16:42 所属栏目：语言来源：

导读：　　在一些APP上有左滑可以删除的功能，这样操作起来很反方便，我们在做微信小程序开发的时候也可以做这样的效果，那么具体该如何实现小程序左滑删除的功能呢？下面是实现效果及代码，大家可以了解看看。

　　.w

　　在一些APP上有左滑可以删除的功能，这样操作起来很反方便，我们在做微信小程序开发的时候也可以做这样的效果，那么具体该如何实现小程序左滑删除的功能呢？下面是实现效果及代码，大家可以了解看看。

　　.wxml
　　
　　<scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'>
　　 <block wx:key="item" wx:for="{{data}}">
　　 <view data-index='{{index}}' class="custom_item" bindtouchstart="drawStart" bindtouchmove="drawMove"
　　   bindtouchend="drawEnd" style="right:{{item.right}}rpx">
　　 <view class="content">{{item.content}}</view>
　　 <view class="remove" bindtap="delItem">删除 </view>
　　 </view>
　　 </block>
　　 </scroll-view>
　　.js
　　Page({
　　 data: {
　　 delBtnWidth: 160,
　　 data: [{ content: "采购", right: 0 }, { content: "供应", right: 0 }, { content: "采购", right: 0 },
　　{ content: "供应", right: 0}],
　　 isScroll: true,
　　 windowWidth:0,
　　 windowHeight: 0,
　　 },
　　 onLoad: function (options) {
　　 var that = this;
　　 wx.getSystemInfo({
　　 success: function (res) {
　　 that.setData({
　　   windowWidth: res.windowWidth,
　　   windowHeight: res.windowHeight
　　 });
　　 }
　　 });
　　 },
　　 drawStart: function (e) {
　　 // console.log("drawStart");
　　 var touch = e.touches[0]
　　
　　 for (var index in this.data.data) {
　　 var item = this.data.data[index]
　　 item.right = 0
　　 }
　　 this.setData({
　　 data: this.data.data,
　　 startX: touch.clientX,
　　 })
　　
　　 },
　　 drawMove: function (e) {
　　 var touch = e.touches[0]
　　 var item = this.data.data[e.currentTarget.dataset.index]
　　 var disX = this.data.startX - touch.clientX
　　
　　 if (disX >= 20) {
　　 if (disX > this.data.delBtnWidth) {
　　 disX = this.data.delBtnWidth
　　 }
　　 item.right = disX
　　 this.setData({
　　 isScroll: false,
　　 data: this.data.data
　　 })
　　 } else {
　　 item.right = 0
　　 this.setData({
　　 isScroll: true,
　　 data: this.data.data
　　 })
　　 }
　　 },
　　 drawEnd: function (e) {
　　 var item = this.data.data[e.currentTarget.dataset.index]
　　 if (item.right >= this.data.delBtnWidth / 2) {
　　 item.right = this.data.delBtnWidth
　　 this.setData({
　　 isScroll: true,
　　 data: this.data.data,
　　 })
　　 } else {
　　 item.right = 0
　　 this.setData({
　　 isScroll: true,
　　 data: this.data.data,
　　 })
　　 }
　　 },
　　
　　 delItem: function (e) {
　　
　　 }
　　})
　　.wxss
　　.custom_item{
　　 height: 240rpx;
　　 width: 100%;
　　 display: flex;
　　 position: relative;
　　}
　　.remove{
　　 width: 160rpx;
　　 height: 100%;
　　 background-color: red;
　　 color: white;
　　 position: absolute;
　　 top: 0;
　　 right: -160rpx;
　　 display: flex;
　　 justify-content: center;
　　 align-items: center;
　　}

（编辑：云计算网_汕头站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

深度优先生成树和广度	Java截取新闻标题
Python pass语句及其用	C++类的定义和对象的建

微信小程序中左滑可以删除 操作的功能怎样做？

微信小程序中左滑可以删除操作的功能怎样做？