微信小程序左滑删除实现代码实例

这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<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>
.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);
}
// pages/touch/touch.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) {
    // console.log(e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束,手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2,不显示删除按钮
      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
      });
    }
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function(e) {
    //开始触摸时 重置所有删除
    this.data.list.forEach(function(v, i) {
      if (v.isTouchMove) //只操作为true的
      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,
    //开始X坐标
    startY = that.data.startY,
    //开始Y坐标
    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
      //滑动超过30度角 return
      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
    })
  },
  /**
* 计算滑动角度
* @param {Object} start 起点坐标
* @param {Object} end 终点坐标
*/
  angle: function(start, end) {
    var _X = end.X - start.X,
    _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  /**
* 生命周期函数--监听页面加载
*/
  onLoad: function(options) {
},
  /**
* 生命周期函数--监听页面初次渲染完成
*/
  onReady: function() {
},
  /**
* 生命周期函数--监听页面显示
*/
  onShow: function() {
},
  /**
* 生命周期函数--监听页面隐藏
*/
  onHide: function() {
},
  /**
* 生命周期函数--监听页面卸载
*/
  onUnload: function() {
},
  /**
* 页面相关事件处理函数--监听用户下拉动作
*/
  onPullDownRefresh: function() {
},
  /**
* 页面上拉触底事件的处理函数
*/
  onReachBottom: function() {
},
  /**
* 用户点击右上角分享
*/
  onShareAppMessage: function() {
}
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

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

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

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

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

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

  • 微信小程序左滑删除功能开发案例详解

    直接进入正题,我们需要做的就是通过手指滑动列表项后,右侧出现删除: 比如说像这样: 向左边滑动后出现如下的效果: 开始撸代码- 假设我们有N个列表项来自一个数组list,先确定基本的结构 <view class="list" wx:for="{{list}}" wx:key> <view class="item"> <view class="wrap">{{item}}</view&g

  • 微信小程序实现左滑修改、删除功能

    本文实例为大家分享了微信小程序实现左滑修改.删除的具体代码,供大家参考,具体内容如下 wxml: <view class="offer-item" wx:for-items='{{offerList}}'> <!--这里绑定了刚才说的3个函数分别为 touchS,touchM touchE--> <!--这里注意这个 style="{{item.txtStyle}}" ,这是我们一会再js中 将要设置的样式 --> <vie

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

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

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

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

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

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

  • 微信小程序左滑删除实现代码实例

    这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key> <view class="co

  • 微信小程序左右滚动公告栏效果代码实例

    这篇文章主要介绍了微信小程序左右滚动公告栏效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 <view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> &l

  • 微信小程序实现一个简单swiper代码实例

    这篇文章主要介绍了微信小程序实现一个简单swiper代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 话不多说,上截图 HTML <swiper class="swiper-block" previous-margin="70rpx" next-margin="70rpx" current="0" autoplay="true" bindcha

  • 微信小程序-form表单提交代码实例

    效果 html代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="section section_gap"> <view class="section__title">是否公开信息</view> <switch name="isPub" /> </view&

  • 微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)

    本文实例为大家分享了微信小程序授权登录解决方案的具体代码,供大家参考,具体内容如下 getUserInfoF:function(){ var that = this; wx.getSetting({ success: (res) => { console.info(res.authSetting); wx.getUserInfo({ success: res => { this.globalData.userInfo = res.userInfo console.info("一开始同

  • 微信小程序实现上传照片代码实例解析

    纸上谈坑 在我实现了这个功能之前,我讲讲我是怎么在这个坑里爬上来的: 我实现上传文件后端的接口的参数是String类型的 前台传的参数:http://tmp/wx忽略很多字母数字.png 但由于这张是本地照片url(外网无法访问),我后台拿到的是一个String类型,是没有办法是去识别这是一张图片的,访问不了这个数据,仅仅把它当做字符串而已.(低级错误) 代码实现 前言:后端接受文件有2种方式(参数): 1. MultipartFile 2.base64 微信上传文件的开发文档 小程序代码 <!

  • 微信小程序HTTP接口请求封装代码实例

    1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回

  • 微信小程序制作扭蛋机代码实例

    公司要制作活动小程序,其中有一个扭蛋机的效果实现抽奖的功能.在网上找了好久竟没有找到(不知道是不是我找代码的方式有问题).最后还是自己做一个吧- _ - ,效果如下: 1.wxml 当然我这里没有用wx:for遍历 <!-- 扭蛋机 --> <view class="egg"> <image class="egg_ji" src="{{imgUrl}}small_program/game/game_luck_draw_nd.p

随机推荐