小程序实现左滑删除效果


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 相关文章推荐
JS中Iframe之间传值的方法
Mar 11 Javascript
js实现select跳转功能代码
Oct 22 Javascript
JavaScript中判断函数、变量是否存在
Jun 10 Javascript
JSON字符串和对象相互转换实例分析
Jun 16 Javascript
JQuery PHP图片在线裁剪实例
Jul 27 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
May 16 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
解决$store.getters调用不执行的问题
Nov 08 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 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PH P5.2至5.5、5.6的新增功能详解
2014/07/14 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Dojo之路:如何利用Dojo实现Drag and Drop效果
2007/04/10 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
JS的get和set使用示例
2014/02/20 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
2018/09/21 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
对python中执行DOS命令的3种方法总结
2018/05/12 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python selenium循环登陆网站的实现
2019/11/04 Python
python爬取天气数据的实例详解
2020/11/20 Python
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
实习鉴定评语
2014/01/19 职场文书
营销总经理岗位职责
2014/02/02 职场文书
婚前协议书怎么写
2014/04/15 职场文书
安全环保标语
2014/06/09 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
先进教师事迹材料
2014/12/16 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
八年级作文之友情
2019/11/25 职场文书
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电