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


Posted in Javascript onOctober 19, 2020

本文实例为大家分享了微信小程序实现左滑修改、删除的具体代码,供大家参考,具体内容如下

wxml:

<view class="offer-item" wx:for-items='{{offerList}}'>
 <!--这里绑定了刚才说的3个函数分别为 touchS,touchM touchE-->
 <!--这里注意这个 style="{{item.txtStyle}}" ,这是我们一会再js中 将要设置的样式 -->
 <view style="{{item.txtStyle}}">
 <view class="offer-item-top fl clearfix" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}">
 <navigator bindtap='navigatorTo' data-index="{{item.id}}">
  <view class='content'>
  <view class='title clearfix'>
  <view class='fl'>
  {{item.title}}党建项目报价表
  </view>
  <image src='../../images/right.png' class='fr'></image>
  </view>
  <view class='note clearfix'>
  <view class='price fl'>
  {{item.create_time}}
  </view>
  </view>
  </view>
 </navigator>
 </view>

 <!--这里是左滑按钮部分----start-->
 <view bindtap="delItem" class='posit fr isMove' hidden='{{!item.isMove}}'>
  <view class="ref" data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="ref">
  <image src='../../images/ref.png'></image>
  </view>
  <view class="del" data-offerid="{{item.id}}" data-index="{{item.id}}" catchtap="del">
  <image src='../../images/default.png'></image>
  </view>
 </view>
 <!--这里是左滑按钮部分----end-->
 </view>
</view>

wxss:

.offer-item {
 height: 150rpx;
 width: 100vw;
 overflow-x: hidden;
 border-bottom: 1px solid #f0f0f0;
}

.offer-item>view {
 position: absolute;
 /* width: calc(100% + 200rpx); */
 height: 150rpx; 
}

.offer-item .offer-item-top {
 height: 100%;
}

.offer-item .offer-item-top navigator {
 display: inline-block;
 width: 100vw; 
 height: 100%;
}

.offer-item .content {
 padding: 35rpx 30rpx;
 position: relative;
 height: calc(100% - 70rpx);
}

.offer-item .title .fl {
 display: inline-block;
 width: 78%;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 30rpx;
 color: #333;
}

.offer-item .title .fr {
 display: inline-block;
 width: 20rpx;
 height: 26rpx;
 margin-top: 5rpx;
}

.offer-item .note {
 position: absolute;
 left: 30rpx;
 bottom: 35rpx;
 width: calc(100vw - 60rpx);
 font-size: 24rpx;
 color: #999;
}

.offer-item .posit {
 width: 200rpx;
 height: 150rpx;
 line-height: 150rpx;
 text-align: center;
 display: none
}

.posit.isMove {
 display: inline-block;
 position: absolute;
}

.posit.isMove[hidden] {
 display: none
}

.offer-item .posit>view {
 display: inline-block;
 width: 100rpx;
}

.offer-item .posit>view:first-of-type {
 background-color: #FED847;
}

.offer-item .posit>view:last-of-type {
 background-color: #C71B1B;
}

.offer-item .posit image {
 display: inline-block;
 width: 36rpx;
 height: 36rpx;
}

js:

let len = 0;  // 初次加载长度
let hadLastPage = false; // 判断是否到最后一页

var initdata = function (that) {
 var list = that.data.offerList
 for (var i = 0; i < list.length; i++) {
 list[i].txtStyle = "";
 list[i].isMove = false;
 }
 that.setData({ 
 offerList: list
 })
}

Page({
 data: {
 offerList: [

 ],
 delBtnWidth: 100, // 删除按钮宽度单位(rpx)
 },


 // 手指刚放到屏幕触发
 touchS: function (e) {
 console.log("touchS" + e);
 // initdata(this);
 // 判断是否只有一个触摸点
 if (e.touches.length == 1) {
 this.setData({
 // 记录触摸起始位置的X坐标
 startX: e.touches[0].clientX
 });
 };
 return false;
 },

 // 触摸时触发,手指在屏幕上每移动一次,触发一次
 touchM: function (e) {
 var that = this;
 initdata(that);
 if (e.touches.length == 1) {
 // 记录触摸点位置的X坐标
 var moveX = e.touches[0].clientX;
 // 计算手指起始点的X坐标与当前触摸点的X坐标的差值
 var disX = that.data.startX - moveX;
 // delBtnWidth 为右侧按钮区域的宽度
 var delBtnWidth = that.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";
 }
 }
 // 获取手指触摸的是哪一个item
 var index = e.currentTarget.dataset.index;
 var list = that.data.offerList;
 // 将拼接好的样式设置到当前item中
 list[index].txtStyle = txtStyle;

 list[index].isMove = true;
 // 更新列表的状态
 this.setData({
 offerList: list
 });
 }
 },
 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 + "px" : "left:0px";
 // 获取手指触摸的是哪一项
 var index = e.currentTarget.dataset.index;
 var list = that.data.offerList;
 list[index].txtStyle = txtStyle;
 // 更新列表的状态
 that.setData({
 offerList: list
 });
 }
 },

 /**
 * 
 */
 navigatorTo: function (event) {

 },

 /**
 * 删除操作
 */
 del: function (e) {
 var that = this;
 var data = {
 id: e.currentTarget.dataset.index
 };
 wx.showModal({
 title: '',
 content: '确定选择删除么?',
 confirmColor: '#C71B1B',
 cancelColor: '#666666',
 success: function (res) {
 if (res.confirm) {
  utils.requestFun("接口url", data, 'POST', function (msg) {
  console.log(msg)

  wx.showToast({
  title: '删除成功',
  icon: 'success',
  duration: 1500
  })
  var lists = that.data.offerList;
  var list1 = [];
  for (let i = 0; i < lists.length; i++) {
  if (lists[i].id != e.currentTarget.dataset.index) {
  list1.push(lists[i])
  }
  }
  len--;
  that.setData({
  offerList: list1
  })
  })
 } else if (res.cancel) {

 }
 }
 })
 },

 /**
 * 修改操作
 */
 ref: function (e) {
 wx.navigateTo({
 url: '修改页面路径?id=' + e.currentTarget.dataset.index,
 })
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 page = 0;
 this.loadList();
 },


 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {

 },

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {
 hadLastPage = false;
 len = 0; 
 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function (event) {
 console.log("上拉事件")
 this.loadList();
 }, 

 /** 
 * 数据请求封装
 */
 loadList: function (event) {
 if (hadLastPage != false) {
 wx.showToast({
 title: '到底啦',
 });
 return;
 }
 var that = this;
 // 显示加载图标 
 wx.showLoading({
 title: '玩命加载中',
 })

 let data = {
 length: len,
 openId: 'openid'
 };
 utils.requestFun("接口url", data, 'POST', function (msg) {

 if (msg.data.length != 0) {
 var lists = that.data.offerList;
 for (let i = 0; i < msg.data.length; i++) {
  msg.data[i].isMove = false;
  lists.push(msg.data[i]);
 }

 // len 
 len = len + msg.data.length;

 // 设置数据 
 that.setData({
  offerList: lists
 })
 } else {
 hadLastPage = true;
 }
 wx.hideLoading();
 })
 }

})

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

Javascript 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
Jan 15 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
使用Vue构建可重用的分页组件
Mar 26 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
如何用Node写页面爬虫的工具集
Oct 26 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
react-router-dom 嵌套路由的实现
May 02 Javascript
小程序实现列表删除功能
Oct 30 #Javascript
require.js 加载过程与使用方法介绍
Oct 30 #Javascript
小程序实现左滑删除功能
Oct 30 #Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 #Javascript
微信小程序实现单选功能
Oct 30 #Javascript
You might like
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
javascript 数组的方法集合
2008/06/05 Javascript
Javascript !!的作用
2008/12/04 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python类和函数中使用静态变量的方法
2015/05/09 Python
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python与php实现分割文件代码
2017/03/06 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python使用KNN算法识别手写数字
2019/04/25 Python
关于python中密码加盐的学习体会小结
2019/07/15 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
appium+python adb常用命令分享
2020/03/06 Python
中学生学习生活的自我评价
2013/10/26 职场文书
时尚休闲吧创业计划书
2014/01/25 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
学校百日安全活动总结
2015/05/07 职场文书
回复函格式及范文
2015/07/14 职场文书
Python编程编写完善的命令行工具
2021/09/15 Python
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript
Vue2.0搭建脚手架
2022/03/13 Vue.js