微信小程序列表中item左滑删除功能

第一步：把想要的两种样式写出来

1.正常显示的样式

css:

.box{
 height: 100%;
}
.item{
 position:relative;
 top: 0;
 width: 100%;
 height: 150rpx;
 border-bottom: #d9d9d9 solid 1rpx;
 padding: 0;
}
.item .content{
 background-color: #ffffff;
 height: 100%;
 position: relative;
 left: 0;
 width: 100%;
 transition: all 0.3s;
}
.item .del-button {
 position: absolute;
 right: -140rpx;
 width: 140rpx;
 height: 100%;
 background-color: #df3448;
 color: #fff;
 top: 0;
 text-align: center;
 display: flex;
 justify-content: center;
 align-items: center;
 transition: all 0.3s;
 font-size: 24rpx;
}

xwml:

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content">显示正常内容</view>
  <view class="del-button">删除</view>
 </view>
</view>

2.显示删除按钮

.item.active .content{
 left: -140rpx;
}
.item.active .del-button{
 right: 0;
}

同时在js中控制样式是否active

data: {
  status:false //true为正常显示，false为显示删除按钮
 },

第二步：绑定事件

其实此时可以绑定bindtap事件，来切换active的状态，点击一下是“显示正常内容”，再点击一下是“删除”。然后，现在把点击事件改成touch并向左move之后再触发，就很好理解了。（样式中，已经提前写好的transition: all 0.3s;就是为了使两个状态之间有个过渡）

微信小程序提供了两个事件可以使用，一个是bindtouchstart，通过这个事件我们可以获得用户刚点击（手指还未抬起）时的坐标。

touchS(e) {
 // 获得起始坐标
 this.startX = e.touches[0].clientX;
 this.startY = e.touches[0].clientY;
},

还有一个是bindtouchmove，我们可以一直获取当前的坐标（用户手指一直在屏幕上滑动时）。因此，我们只需要得到x轴上的移动的前后坐标相减是正数，就是向左移动。

touchM(e) {
  // 获得当前坐标
  this.currentX = e.touches[0].clientX;
  this.currentY = e.touches[0].clientY;
  const x = this.startX - this.currentX; //横向移动距离
  const y = Math.abs(this.startY - this.currentY); //纵向移动距离，若向左移动有点倾斜也可以接受
  if (x > 35 && y < 110) {
  //向左滑是显示删除
   this.setData({
    status: false
   })
  } else if (x < -35 && y < 110) {
  //向右滑
   this.setData({
    status: true
   })
  }
 },

然后绑定到Item上

<view class="box">
 <view class="item {{status ? '' :'active'}}">
  <view class="content" bindtouchstart="touchS" bindtouchmove="touchM">显示正常内容</view>
  <view class="del-button">删除</view>
 </view>
</view>

最后再在删除的view里bindtap一个删除方法即可删除。

以上是最简版的效果，还需很多优化要自行添加。

总结

以上所述是小编给大家介绍的微信小程序列表中item左滑删除功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 微信小程序 实现列表项滑动显示删除按钮的功能

    微信小程序 实现列表项滑动显示删除按钮的功能 微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位. wxml: <view class="container"> <view class="record-box" data-datetime="{{record.

  • 微信小程序 侧滑删除（左滑删除）

    微信小程序 侧滑删除（左滑删除）

    微信小程序 侧滑删除(左滑删除) 如图所示,demo是小程序的侧滑删除,这个是我在别人写的例子的基础上修改的.代码如下 js文件代码: // pages/leftSwiperDel/index.js var initdata = function (that) { var list = that.data.list for (var i = 0; i < list.length; i++) { list[i].txtStyle = "" } that.setData({ list

  • 微信小程序 删除项目工程实现步骤

    微信小程序 删除项目工程实现步骤

    微信小程序如何删除项目工程 微信小程序现在非常火,也许是前端工程师有一个春天的来临,最近学习这部分知识,也做些小的DEMO ,这里就说下如何实现小程序的项目工程删除. 微信小程序本地创建的项目没有删除功能,我通过尝试找到了可以清理的方法,只在Mac osx测试通过,windows可以根据原理自行解决,估计原理都是一致的: 删除数据文件夹下的Default即可,属于全部清理,删除后需要重新扫二维码登录. Mac osx 下目录: $HOME/Library/Application Support/

  • 微信小程序实现图片上传、删除和预览功能的方法

    本文实例讲述了微信小程序实现图片上传.删除和预览功能的方法.分享给大家供大家参考,具体如下: 这里主要介绍一下微信小程序的图片上传图片删除和图片预览 布局 <view class="img-v"> <view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image src="{{i

  • 微信小程序删除处理详解

    微信小程序删除处理详解

    没有 confrim 那怎么实现这个效果呢? 可以使用小程序里的模态框 代码: wxml: <a class="reply" wx:if="{{comment.uid==comment.login_uid}}" bindtap="del" data-cid="{{comment.c_id}}">删除</a> js: del:function(e){ var that = this; wx.showMod

  • 微信小程序左滑删除效果的实现代码

    微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

  • 微信小程序实现滑动删除效果

    微信小程序实现滑动删除效果

    最初打算使用scroll-view实现,效果好.流畅.有惯性滑动,但由于滚动条没法去掉.无法实现上下层的帧布局,最终放弃了. 还是自己写个吧,利用手势事件.遗憾的是小程序中目前没有像Android中快速滑动事件,所以,要实现惯性滑动是不可能了. item的布局: 推荐小程序优先使用flex布局,完全够用.这也是微信推荐的. <view wx:for="{{cardTeams}}" wx:for-item="cardTeam" id="{{cardTe

  • 微信小程序实现长按删除图片的示例

    说明 最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹 需求: 长按删除指定图片 需要解决的问题 长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法 长按事件是用bindlongpress(不会跟点击事件bindtap冲突); 在wxml中添加索引index,然后在js中用currentTarget.dataset.index获取当前元素下标 通过splice方法删除splice(index,1),删除一个当前元素 具体实现 <view class

  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

  • 微信小程序列表中item左滑删除功能

    第一步:把想要的两种样式写出来 1.正常显示的样式 css: .box{ height: 100%; } .item{ position:relative; top: 0; width: 100%; height: 150rpx; border-bottom: #d9d9d9 solid 1rpx; padding: 0; } .item .content{ background-color: #ffffff; height: 100%; position: relative; left: 0;

  • 微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能

    实现类似ios端微信的左滑显示置顶.删除按钮的功能,首先需将按钮部分设为绝对定位,并且right设为负值溢出屏幕.利用小程序事件处理的api,分别读取触摸开始,触摸移动时,触摸结束的X/Y坐标,根据差值来改变整个卡片的位置. 这里有一个细节,为了防止按钮的点击干扰到卡片主部分的滑动,需要将整个卡片分为两部分. <View style={`${positionStyle[index]}`}> <View onTouchStart={this.moveTaskStart} onTouchMo

  • 微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析

    本文实例讲述了微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法.分享给大家供大家参考,具体如下: 微信小程序为2017年1月9日打下了一个特殊的标签,迅速刷爆了网络和朋友圈,最近我也写了一个demo程序体验一把.微信小程序和vuejs有些像,都是数据驱动视图&单向数据绑定,而其体验要比H5页面好很多,这得益于微信环境的支持以及首次运行时同时加载所有页面的处理.本文将分享微信小程序列表的下拉刷新和上划加载的实践. 效果图 首先来看看程序效果图,以下四张图从左至右依次是:下来刷新动画.下拉刷

  • 小程序实现左滑删除功能

    本文实例为大家分享了小程序实现左滑删除功能的具体代码,供大家参考,具体内容如下 <!-- 外层包裹视图 --> <view class="cont"> <!-- 列表 --> <view wx:for="{{list}}" wx:key="index" class="list"> <!-- 滑动删除 --> <view bindtouchstart="

  • 微信小程序swiper-dot中的点如何改成滑块详解

    微信小程序swiper-dot中的点如何改成滑块详解

    目录 背景 目标效果 思路 实现 swiper监听change 自定义dot模块 change事件中的逻辑 写在最后 本文主要介绍如何基于已有的组件(比如微信小程序的swiper,还有我们平时h5用的比较多的swiper.js等),实现一个滑块样式的指示面板.demo基于小程序,但是逻辑通用. 背景 最近要做一个新的小程序,在首页部分有一个swiper模块,因为设计同学的出色发挥

  • 微信小程序列表时间戳转换实现过程解析

    微信小程序列表时间戳转换实现过程解析

    这篇文章主要介绍了微信小程序列表时间戳转换实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 第一步先写js 随便命名为times.js function toDate(number){ var n=number * 1000; var date = new Date(n); var Y = date.getFullYear() + '/'; var M = (date.getMonth()+1 < 10 ? '0'+(date.get

  • 深入解析微信小程序开发中遇到的几个小问题

    本地图片不显示,开发工具运行是没问题的,但真机调试却显示不了 item.img = '/goods/img/图片.png' <image src=" { { item.img } } " class="image"> </image> 经过仔细观察发现,路径是没问题的,问题在于图片名不能是中文的,把它改成字母+数字就好了. 使用FileSystemManager.readdir(Object object)方法读取本地文件夹中的所有图片,报错

  • 微信小程序 数组中的push与concat的区别

    微信小程序 数组中的push与concat的区别 前言: 微信小程序中需要用到数组的操作,介于本人js基础薄弱,故数组操作进行简单记录,以备后期方便学习: push和concat二者功能很相像,但有两点区别. 先看如下例子: var arr = []; arr.push(1); arr.push(2); arr.push([3, 4]) arr.push(5, 6); arr = arr.concat(7); arr = arr.concat([8, 9]); arr = arr.concat(

  • 微信小程序 开发中遇到问题总结

    微信小程序 开发中遇到问题总结 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function(){ let that = this; wx.request({ url: 'https://a.com/url.php', method: 'GET', success: function(e){ that.data = 123; } }) }; }) //conte

  • 详解微信小程序Page中data数据操作和函数调用

    微信小程序Page中data数据获取和设置 一.Page中data数据的获取和设置:        1.设置data数据 this.setData(object) setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value.其中 key 可以非常灵活,以数据 路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义. this.setData({ ; en

随机推荐