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

前言:实现这个效果有几种方式,大家可以看看这篇文章从京东购物,印象笔记看小程序左滑交互的实现 ,而我们就使用最新的方案,就是用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%);

我们下章再讲。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

如何在现有的 Web 应用中使用 ReactJS

原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin ? 当我们学习...

26540
来自专栏个人随笔

房上的猫:HTML5基础

一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)...

474120
来自专栏逸鹏说道

06.移动先行之谁主沉浮----我的代码我来写(Xaml的优势)

如果移动方向有任何问题请参考===> 异常处理汇总-移动系列(点) 前面几节课,我们都是在前台创建对象,进行一些设置,那么我们为什么不用传统的方法来编程呢? 我...

27550
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

15720
来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

9500
来自专栏web前端

02移动端布局

  一、rem      1、意义:当px固定宽度不能适应不同屏幕尺寸时,布局需要,从而产生rem      2、rem 和 em 区别           2...

21890
来自专栏Windows Community

Windows 8.1 应用再出发 - 几种更新的控件

Windows 8.1 除了新增了很多很有用的控件外,还对一些控件做出了更新。接下来我们一起对这些更新的控件一一做出讲解。 1. FlipView 更新 翻转视...

37680
来自专栏HTML5学堂

特殊字体神器-fontmin,秒杀一切工具

HTML5学堂:此前,我们介绍过font-spider这款软件,也讲解过处理网络字体的方法。而今我们为大家介绍一款能够秒杀之前所有工具的“特殊字体”制作工具。 ...

49440
来自专栏施炯的IoT开发专栏

《101 Windows Phone 7 Apps》读书笔记-Alphabet Flashcards

课程内容 Ø 幻灯片效果的切换     最近有人问我如何来写一个幻灯片的应用程序,在这个应用程序中,他们可以在不同的页面之间切换,就像在Pictures h...

21960

扫码关注云+社区

领取腾讯云代金券