首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 — 实现左滑删除效果①

小程序 — 实现左滑删除效果①

作者头像
Ewall
发布2018-09-30 10:22:56
2.6K0
发布2018-09-30 10:22:56
举报
文章被收录于专栏:vue学习vue学习

前言:实现这个效果有几种方式,大家可以看看这篇文章从京东购物,印象笔记看小程序左滑交互的实现 ,而我们就使用最新的方案,就是用movable-view来实现左滑删除的效果。 GitHub:https://github.com/Ewall1106/miniProgramDemo

首先上图看下最终效果:

小程序实现左滑删除效果

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/>组件中,并且必须是直接子节点,否则不能移动。
  • 有这么一些属性(没截全):

部分截图来自于小程序官网

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

2、页面结构

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

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

基本html结构

(2)然后我们定义一下css样式,这里大家应该能看得懂,我就不多说了:

样式

主要请仔细看看容器的宽度,后面我们设置movable-viewx属性的时候是根据样式的宽度来处理的。

3、小结

这样,我们的页面基本结构就实现了,到这里,我们还有这么几个问题需要解决完善:

  • 事件的监听,当超过最大滑动距离时,让movable-view提供一个非常流畅的过界动画和回弹效果;
  • 设置阈值,往左移动超过阈值则显示删除按钮,否则隐藏(一般为删除按钮宽的40%);

我们下章再讲。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.09.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、movable-area基本概念
  • 2、页面结构
  • 3、小结
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档