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


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 相关文章推荐
javascript multibox 全选
Mar 22 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
Jul 01 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
typescript配置alias的详细步骤
Aug 12 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之COOKIE支持详解
2010/09/20 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP的基本常识小结
2013/07/05 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
2010/01/22 Javascript
flexigrid 参数说明
2010/11/23 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
js如何判断不同系统的浏览器类型
2013/10/28 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python 字符串定义
2009/09/25 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python中set常用操作汇总
2016/06/30 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python实现sm2和sm4国密(国家商用密码)算法的示例
2020/09/26 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
入党函调证明材料
2015/06/19 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python
Python开发简易五子棋小游戏
2022/05/02 Python