小程序实现左滑删除功能


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 相关文章推荐
csdn 论坛技术区平均给分功能
Nov 07 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
React列表栏及购物车组件使用详解
Jun 28 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实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
jQuery图片轮播的具体实现
2013/09/11 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
微信小程序 闭包写法详细介绍
2016/12/14 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
详解Python传入参数的几种方法
2019/05/16 Python
python绘制规则网络图形实例
2019/12/09 Python
Python多线程获取返回值代码实例
2020/02/17 Python
python实现单机五子棋
2020/08/28 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
final, finally, finalize的区别
2012/03/01 面试题
校园公益广告语
2014/03/13 职场文书
信访维稳工作汇报
2014/10/27 职场文书
文体活动总结
2015/02/04 职场文书
党小组鉴定意见
2015/06/02 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
redis protocol通信协议及使用详解
2022/07/15 Redis