小程序实现左滑删除功能


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 相关文章推荐
setInterval 和 setTimeout会产生内存溢出
Feb 15 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
extjs 时间范围选择自动判断的实现代码
Jun 24 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
JavaScript实现滚动加载更多
Dec 27 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插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
php利用scws实现mysql全文搜索功能的方法
2014/12/25 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
JavaScript OOP面向对象介绍
2010/12/02 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
2014/09/24 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
EXTJS7实现点击拖拉选择文本
2020/12/17 Javascript
python中的编码知识整理汇总
2016/01/26 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
HTML5 video标签(播放器)学习笔记(二):播放控制
2015/04/24 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
毕业生自我鉴定
2013/11/05 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
实践论读书笔记
2015/06/29 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
SQL 聚合、分组和排序
2021/11/11 MySQL
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers