小程序实现左滑删除效果


Posted in Javascript onJuly 25, 2019

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

小程序实现左滑删除效果

1、movable-area基本概念

实现思路:

大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解。

(1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看;

注意:movable-area 必须设置width和height属性,不设置默认为10px

(2)movable-view这个就是一个可移动的视图容器,可以在页面中拖拽滑动。

movable-view 必须设置width和height属性,不设置默认为10px
movable-view 默认为绝对定位,top和left属性为0px
当movable-view小于movable-area时,movable-view的移动范围是在movable-area内;当movable-view大于movable-area时,movable-view的移动范围必须包含movable-area(x轴方向和y轴方向分开考虑)

但是要注意: movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。
有这么一些属性看微信小程序api

OK,这就是关于movable-area组件的一些基本概念的介绍,接下来我们实践实践。

2、页面结构

(1)这是我们html基本页面结构,我主要来解释一下movable-view的属性起到了一些什么作用。

  • 首先我们定义了direction方向为horizontal(横向);
  • 然后x就是偏移方向,这里我们给个默认值为0;
  • out-of-bounds定义当超过可移动区域后,还可以移动;
  • damping为阻尼系数,设置为100就是让它移动快点;
  • 最后绑定了一个在拖动过程中触发的事件、触摸开始和结束事件。

<movable-view damping="100" out-of-bounds="true" direction="horizontal" x="{{x}}" animation="false" bindchange="handleMovableChange" capture-bind:touchstart="handleTouchestart" capture-bind:touchend="handleTouchend">

代码如下:

html

<view class="container">
 <view class="main">
 <view class="main_item">
  <movable-area>
  <movable-view damping="100" out-of-bounds="true" direction="horizontal" x="{{x}}" animation="false" bindchange="handleMovableChange" capture-bind:touchstart="handleTouchestart" capture-bind:touchend="handleTouchend">
   <view class="main_item_content ">
   左滑删除
   </view>
  </movable-view>
  </movable-area>
  <view class="delete_btn " data-productIndex="{{index}} " bindtap="handleDeleteProduct ">删除</view>
 </view>
 </view>
</view>

css:

.container {
 padding: 0;
}
 
page {
 padding: 0;
}
 
.main {
 display: flex;
 flex-direction: column;
 align-items: center;
}
 
.main_item {
 display: flex;
 flex-direction: row;
 background: #fff;
 overflow: hidden;
}
 
movable-area {
 width: 532rpx;
 height: 201rpx;
 background: #fff;
}
 
movable-view {
 width: 716rpx;
 height: 201rpx;
}
 
.main_item_content {
 box-sizing: border-box;
 height: 201rpx;
 border-radius: 10rpx;
 line-height: 201rpx;
 color: #8e8e8e;
 padding-left: 10px;
 background: #eee;
}
 
.delete_btn {
 width: 184rpx;
 height: 201rpx;
 background-color: #8FC31F;
 border-top-right-radius: 10px;
 border-bottom-right-radius: 10px;
 color: #fff;
 font-size: 28rpx;
 text-align: center;
 line-height: 201rpx;
}

js:

// pages/listDel/index.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 // x轴方向的偏移
 x: 0,
 // 当前x的值
 currentX: 0
 },
 
 handleMovableChange: function(e) {
 // this.data.currentX = e.detail.x;
 this.data.currentX = e.detail.x;
 },
 
 handleTouchend: function(e) {
 this.isMove = true;
 if (this.data.currentX < -46) {
  this.data.x = -92;
  this.setData({
  x: this.data.x
  });
 } else {
  this.data.x = 0;
  this.setData({
  x: this.data.x
  });
 }
 },
 handleTouchestart: function(e) {},
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 // let _this = this;
 // wx.createSelectorQuery().selectAll('.delBtn ').boundingClientRect(function(rect) {
 // _this.data.delWidth = rect[0].width;
 // }).exec();
 },
 
 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function() {
 
 },
 
 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function() {
 
 },
 
 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function() {
 
 },
 
 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function() {
 
 },
 
 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function() {
 
 }
})

2:touchstart、touchmove 如果大家想了解的更清楚可以查看帮助文档的哦

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

Javascript 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
jQuery最佳实践完整篇
Aug 20 Javascript
关于textarea提交的内容无法换行的解决办法
Apr 09 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
微信小程序实现图片压缩功能
Jan 26 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 #Javascript
详解Vue.js和layui日期控件冲突问题解决办法
Jul 25 #Javascript
turn.js异步加载实现翻书效果
Jul 25 #Javascript
js 实现ajax发送步骤过程详解
Jul 25 #Javascript
MockJs结合json-server模拟后台数据
Aug 26 #Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 #Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
You might like
十天学会php(3)
2006/10/09 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
js判断浏览器的比较全的代码
2007/02/13 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
详解JavaScript的另类写法
2016/04/11 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
微信小程序实现时间进度条功能
2020/11/17 Javascript
vue-iview动态新增和删除的方法
2020/06/17 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
python装饰器使用方法实例
2013/11/21 Python
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
PyMongo安装使用笔记
2015/04/27 Python
浅谈python中截取字符函数strip,lstrip,rstrip
2015/07/17 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python实现电脑自动关机
2018/06/20 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
Pycharm Git 设置方法
2020/09/15 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
GWebs公司笔试题
2012/05/04 面试题
求职信模板标准格式范文
2014/02/23 职场文书
创建省级文明单位实施方案
2014/02/27 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
产品售后服务承诺书
2014/05/21 职场文书
小学家长意见怎么写
2015/06/03 职场文书
vue 实现上传组件
2021/05/31 Vue.js