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


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文件的函数代码分享
Jul 28 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
JS图片预加载三种实现方法解析
May 08 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
小程序实现列表删除功能
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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
2016/08/25 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
Python内置函数bin() oct()等实现进制转换
2012/12/30 Python
bpython 功能强大的Python shell
2016/02/16 Python
Python制作动态字符图的实例
2019/01/27 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
django实现更改数据库某个字段以及字段段内数据
2020/03/31 Python
英国航空官网:British Airways
2016/09/11 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
暑假实习求职信范文
2013/09/22 职场文书
村委会贫困证明
2014/01/14 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
导游词之桂林
2019/08/20 职场文书
七年级作文之游记
2019/12/11 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技