小程序实现左滑删除效果


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 相关文章推荐
arguments对象
Nov 20 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
对JavaScript中this指针的新理解分享
Jan 31 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
原生JS实现响应式瀑布流布局
Apr 02 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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入门速成(2)
2006/10/09 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Django中的cookie与session操作实例代码
2017/08/17 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
js判断浏览器是否支持html5
2014/08/17 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
bootstrap table实例详解
2017/01/06 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python使用opencv实现马赛克效果示例
2019/09/28 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Python基于Twilio及腾讯云实现国际国内短信接口
2020/06/18 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
建筑学专业自荐书
2014/07/09 职场文书
七一慰问简报
2015/07/20 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers