小程序实现左滑删除功能


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 相关文章推荐
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
JavaScript经典效果集锦
Jul 06 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 Javascript
javascript轮播图算法
Oct 21 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
JavaScript中关于class的调用方法
Nov 28 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
Feb 12 Javascript
JS轮播图的实现方法2
Aug 25 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_screw 1.5:php加密: 安装与使用详解
2013/06/20 PHP
PHP中error_reporting()用法详解
2015/08/31 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript实现点击后变换按钮显示文字的方法
2015/05/13 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery实现图片文字淡入淡出效果
2015/12/21 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
Python之文字转图片方法
2018/05/10 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
django框架两个使用模板实例
2019/12/11 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python,Java,JavaScript实现indexOf
2020/09/09 Python
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
init进程的作用
2015/08/20 面试题
会计专业求职信范文
2014/03/16 职场文书
歌颂祖国演讲稿
2014/05/04 职场文书
趵突泉导游词
2015/02/03 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫