小程序实现左滑删除功能


Posted in Javascript onOctober 30, 2018

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

小程序实现左滑删除功能

小程序实现左滑删除功能

<!-- 外层包裹视图 -->
<view class="cont">
 <!-- 列表 -->
 <view wx:for="{{list}}" wx:key="index" class="list">
 <!-- 滑动删除 -->
 <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}" style="{{item.shows}}" class="list_del txt">
  <!-- 列表图片 -->
  <image class="list_img" mode="widthFix" src="{{item.image}}"></image>
  <!-- 列表名称 -->
  <text class='list_name'>{{item.name}}</text>
  <!-- 列表标题 -->
  <label class='list_title'>{{item.title}}</label>
  <!-- 活动时间 -->
  <text class='list_datas'>活动时间:{{item.datas}}</text>
 </view>
 <!-- 删除 -->
 <view data-index="{{index}}" bindtap="delItem" class="list_del del">删除</view>
 </view>
</view>

CSS:

/* 父级 */
page{
 background-color: #f5f5f5;
}
 
/* 外层视图 */
.cont{ 
 width: 100%; 
 margin: 0 auto; 
} 
 
.list{ 
 position: relative; 
 height: 170rpx; 
margin: 20rpx; 
border-radius: 10rpx;
 line-height: 170rpx; 
 overflow: hidden; 
} 
/* 删除外层包裹视图 */
.list_del{ 
 position: absolute; 
 top:0; 
} 
.list_del.txt{ 
 position: relative;
 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; 
} 
/* 删除 */
.list_del.del{ 
 background-color: #e64340; 
 width: 180rpx;text-align: center; 
 z-index: 4; 
 right: 0; 
 color: #fff 
} 
/* 列表图片 */
.list_img{ 
 
width: 105rpx;
height: 105rpx;
border-radius: 10rpx;
vertical-align: middle; 
margin-left: 15rpx;
margin-top: -8rpx;
} 
 
 /* 列表名称 */
.list_name{
 position: absolute;
 left:168rpx;
 bottom:18rpx;
}
/* 列表标题 */
.list_title{
 position: absolute;
 right:155rpx;
 bottom:18rpx; 
 font-size: 13px;
 color: #818181;
}
/* 活动时间 */
.list_datas{
 position: absolute;
 left:168rpx;
 top:35rpx; 
 font-size: 13px;
 color: #818181;
}

js:

// 默认声明一个函数记录list显示的数据---删除状态
var initdata = function(that) {
 var list = that.data.list
 for (var i = 0; i < list.length; i++) {
 list[i].shows = ""
 }
 that.setData({
 list: list
 })
}
var app = new getApp();
Page({
 data: {
 delBtnWidth: 185, //删除按钮宽度单位(rpx) 
 // 列表数据
 list: [{
  // 删除状态
  shows: "",
  // 列表中图片
  image: "../../image/list_img.png",
  // 昵称
  name: "菜鸟老五",
  // 简介title
  title: "主办方:小米科技",
  // 日期
  datas: "2017.02.21"
  },
  {
  shows: "",
  image: "../../image/list_img.png",
  name: "菜鸟老五",
  title: "主办方:小米科技",
  datas: "2017.02.21"
  },
  {
  shows: "",
  image: "../../image/list_img.png",
  name: "菜鸟老五",
  title: "主办方:小科技",
  datas: "2017.02.21"
  },
  {
  shows: "",
  image: "../../image/list_img.png",
  name: "菜鸟老五",
  title: "主办方:小米科技",
  datas: "2017.02.21"
  },
  {
  shows: "",
  image: "../../image/list_img.png",
  name: "菜鸟老五",
  title: "主办方:小米科技",
  datas: "2017.02.21"
  },
 
 ],
 
 },
 
 onLoad: function(options) {
 this.initEleWidth();
 },
 
 // 开始滑动事件
 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";
  }
  }
 
 }
 },
 // 滑动中事件
 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 = "";
  txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
 
  //获取手指触摸的是哪一项 
  var index = e.target.dataset.index;
  var list = this.data.list;
  list[index].shows = txtStyle;
  console.log("1", list[index].shows);
  //更新列表的状态 
  this.setData({
  list: list
  });
 } else {
  console.log("2");
 }
 },
 //获取元素自适应后的实际宽度 
 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;
 // 打印出当前选中的index
 console.log(e.currentTarget.dataset.index);
 // 获取到列表数据
 var list = that.data.list;
 // 删除
 list.splice(e.currentTarget.dataset.index, 1);
 // 重新渲染
 that.setData({
  list: list
 })
 initdata(that)
 }
})

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

Javascript 相关文章推荐
javascript 一个函数对同一元素的多个事件响应
Jul 25 Javascript
js自动闭合html标签(自动补全html标记)
Oct 04 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
jquery.mobile 共同布局遇到的问题小结
Feb 10 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
vuejs绑定class和style样式
Apr 11 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 #Javascript
小程序云开发部署攻略(图文教程)
Oct 30 #Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
Oct 30 #Javascript
微信小程序实现单选功能
Oct 30 #Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 #Javascript
小程序实现多选框功能
Oct 30 #Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 #Javascript
You might like
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
关于JS与jQuery中的文档加载问题
2017/08/22 jQuery
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
vue axios 简单封装以及思考
2018/10/09 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
js实现表格数据搜索
2020/08/09 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
简介Django框架中可使用的各类缓存
2015/07/23 Python
python 列表降维的实例讲解
2018/06/28 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
JD Sports比利时官网:英国领先的运动鞋和运动服饰零售商
2018/10/10 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
静态成员和非静态成员的区别
2012/05/12 面试题
节能环保口号
2014/06/12 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
批评与自我批评范文
2014/10/15 职场文书
初中家长意见
2015/06/03 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
小学感恩主题班会
2015/08/12 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书