小程序实现左滑删除效果


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实现给图片加链接
Aug 15 Javascript
javascript while语句和do while语句的区别分析
Dec 08 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
javascript+ajax实现产品页面加载信息
Jul 09 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
开启Javascript中apply、call、bind的用法之旅模式
Oct 28 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
Jun 04 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
浅谈如何使用webpack构建多页面应用
May 30 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将会员数据导入到ucenter的代码
2010/07/18 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
JavaScript中的ES6 Proxy的具体使用
2019/06/16 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python获取mp3文件信息的方法
2015/06/15 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python中的self用法详解
2019/08/06 Python
python根据文本生成词云图代码实例
2019/11/15 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
文员个人求职自荐信
2013/09/21 职场文书
计算机专业个人简短的自我评价
2013/10/23 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
领导检查欢迎词
2014/01/14 职场文书
俄语专业职业生涯规划
2014/02/26 职场文书
求职自荐信的格式
2014/04/07 职场文书
文案策划专业自荐信
2014/07/07 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
工作检讨书大全
2015/01/26 职场文书
2015年世界急救日宣传活动方案
2015/05/06 职场文书
如何使用SQL Server语句创建表
2022/04/12 SQL Server