微信小程序 侧滑删除(左滑删除)

微信小程序 侧滑删除(左滑删除)

如图所示,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: list })
} 

Page({
 data: {
  delBtnWidth: 180,//删除按钮宽度单位(rpx)
  list: [
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   },
   {
    txtStyle: "",
    icon: "/images/qcm.png",
    txt: "指尖快递"
   }, 

  ]
 },
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  this.initEleWidth();
 },
 onReady: function () {
  // 页面渲染完成
 },
 onShow: function () {
  // 页面显示
 },
 onHide: function () {
  // 页面隐藏
 },
 onUnload: function () {
  // 页面关闭
 },
 touchS: function (e) {
  if (e.touches.length == 1) {
   this.setData({
    //设置触摸起始点水平方向位置
    startX: e.touches[0].clientX
   });
  }
 },
 touchM: function (e) {
  var that = this
  initdata(that)
  if (e.touches.length == 1) {
   //手指移动时水平方向位置
   var moveX = e.touches[0].clientX;
   //手指起始点位置与移动期间的差值
   var disX = this.data.startX - moveX;
   var delBtnWidth = this.data.delBtnWidth;
   var txtStyle = "";
   if (disX == 0 || disX < 0) {//如果移动距离小于等于0,文本层位置不变
    txtStyle = "left:0px";
   } else if (disX > 0) {//移动距离大于0,文本层left值等于手指移动距离
    txtStyle = "left:-" + disX + "px";
    if (disX >= delBtnWidth) {
     //控制手指移动距离最大值为删除按钮的宽度
     txtStyle = "left:-" + delBtnWidth + "px";
    }
   }
   //获取手指触摸的是哪一项
   var index = e.target.dataset.index;
   var list = this.data.list;
   list[index].txtStyle = txtStyle;
   //更新列表的状态
   this.setData({
    list: list
   });
  }
 }, 

 touchE: function (e) {
  if (e.changedTouches.length == 1) {
   //手指移动结束后水平位置
   var endX = e.changedTouches[0].clientX;
   //触摸开始与结束,手指移动的距离
   var disX = this.data.startX - endX;
   var delBtnWidth = this.data.delBtnWidth;
   //如果距离小于删除按钮的1/2,不显示删除按钮
   var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
   //获取手指触摸的是哪一项
   var index = e.target.dataset.index;
   var list = this.data.list;
   list[index].txtStyle = txtStyle;
   //更新列表的状态
   this.setData({
    list: list
   });
  }
 },
 //获取元素自适应后的实际宽度
 getEleWidth: function (w) {
  var real = 0;
  try {
   var res = wx.getSystemInfoSync().windowWidth;
   var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应
   // console.log(scale);
   real = Math.floor(res / scale);
   return real;
  } catch (e) {
   return false;
   // Do something when catch error
  }
 },
 initEleWidth: function () {
  var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
  this.setData({
   delBtnWidth: delBtnWidth
  });
 },
 //点击删除按钮事件
 delItem: function (e) {
  var that = this
  wx.showModal({
   title: '提示',
   content: '是否删除?',
   success: function (res) {
    if (res.confirm) {
     //获取列表中要删除项的下标
     var index = e.target.dataset.index;
     var list = that.data.list;
     //移除列表中下标为index的项
     list.splice(index, 1);
     //更新列表的状态
     that.setData({
      list: list
     });
    } else {
     initdata(that)
    }
   }
  }) 

 } 

})

wxss文件代码:

/* pages/leftSwiperDel/index.wxss */
view{
  box-sizing: border-box;
}
.item-box{
  width: 700rpx;
  margin: 0 auto;
  padding:40rpx 0;
}
.items{
  width: 100%;
}
.item{
  position: relative;
  border-top: 2rpx solid #eee;
  height: 120rpx;
  line-height: 120rpx;
  overflow: hidden;
}
.item:last-child{
  border-bottom: 2rpx solid #eee;
}
.inner{
  position: absolute;
  top:0;
}
.inner.txt{
  background-color: #fff;
  width: 100%;
  z-index: 5;
  padding:0 10rpx;
  transition: left 0.2s ease-in-out;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.inner.del{
  background-color: #e64340;
  width: 180rpx;text-align: center;
  z-index: 4;
  right: 0;
  color: #fff
}
.item-icon{
  width: 64rpx;
  vertical-align: middle;
  margin-right: 16rpx
}
.thumb{
  width: 200px;
  height: 200px;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
}

wxml文件代码:

<view class="item-box">
 <view class="items">
  <view wx:for="{{list}}" wx:key="{{index}}" class="item">
   <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.txtStyle}}" class="inner txt">
   <image class="item-icon" mode="widthFix" src="{{item.icon}}"></image>{{index}}{{item.txt}}</view>
   <view data-index="{{index}}" bindtap = "delItem" class="inner del">删除</view>
  </view>
 </view>
</view>

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

(0)

相关推荐

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

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

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

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

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

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

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

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

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

    没有 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

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

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

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • 微信小程序 侧滑删除(左滑删除)

    微信小程序 侧滑删除(左滑删除) 如图所示,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

  • mpvue小程序仿qq左滑置顶删除组件

    背景: 前几天,公司的一个小程序项目开发的时候,遇到了一点点问题.设计师这狗币要让我在小程序上实现类似QQ左滑置顶删除的操作,心里mmp,我就是一个刚来公司三天的小小前端实习生而已,我想学习....当然刚刚来就被公司委以重任,也能看出本人技术过人,尤其是作为一个大二刚刚结束的学生来说.废话不多说,对于这个功能,第一反应就是百度,不百度不得了,一百度吓一跳.前辈们也来都做过."那我不是直接照搬就行,开心".开开心心的用mpvue上手之后,心里mmp,mpvue的坑这么多....还不如自己

  • 微信小程序基于movable-view实现滑动删除效果

    基于movable-view实现的一种较为完美的滑动删除效果 前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来 1.wxml布局 <view class="list"> <view class="row" wx:for="{{list}}" wx:key="id"> <movable-area class="lis

  • 微信小程序项目总结之点赞 删除列表 分享功能

    小程序点赞功能 思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表 判断点击的id 2.如果id相同 判断是否点赞过 如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con

  • 小程序原生实现左滑抽屉菜单

    目录 WXS 响应事件 方案A 页面结构和样式 WXS 事件回调函数 WXS 脚本 遮罩层 方案B 为什么要使用 WXS 结语 & 参考资料 参考资料: 在移动端,侧滑菜单是一个很常用的组件(通常称作 Drawer,抽屉).因为现在手机屏幕太大,点击角落的菜单按钮明显不如在屏幕中间滑动方便. 相比其他平台,小程序的组件库支持明显还不够完善,各个框架也还不太成熟.由于之前使用框架的过程中被各种神秘bug搞的头秃,还是用回了原生环境. 最近研究了一下如何在原生框架中实现滑动抽屉菜单效果,本来以为很麻

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

    最近做微信小程序项目遇到左滑动效果,比如在我的收藏页面,我的历史浏览记录页面,我的购物车页面,大多数都会用到这种效果,我把代码复制出来,供大家参考,用的时候直接用模板,再此基础上修改就行. wxml中的代码: <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index=" {{index}}" bindtouchstart="touchstar

  • 微信小程序列表中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;

  • 微信小程序实现收货地址左滑删除

    本文实例为大家分享了微信小程序实现收货地址左滑删除的具体代码,供大家参考,具体内容如下 效果: 思路: 一.用相对定位和绝对定位,列表放在上层,删除按钮放在下层(z-index不要为负). 二.触摸事件判断用户是否左滑,有 bindtouchstart,bindtouchmove,bindtouchend 三个触摸事件. 1.bindtouchstart 记录触摸开始的点.开始点的坐标在 e.touches[0] 中,这是相对于屏幕的,也就是以屏幕左上方为原点. 2.bindtouchmove 

随机推荐