小程序实现左滑删除效果

小程序的左滑删除效果用的是组件 movable-area 和 movable-view

文档 : https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

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/>组件中,并且必须是直接子节点,否则不能移动。

movable-view 还有很多属性,这里就不介绍了.

2、页面结构

test.wxml

<!--pages/test/test.wxml-->
<view class="page">

<movable-area class="m_a" >
  <movable-view class="data_list" direction="horizontal" inertia="true"  out-of-bounds="true">

   <view  class="d_box">
    <view class="data">内容内容内容内容内容内容内容</view>
    <view>删除</view>
   </view>

  </movable-view>

</movable-area>

</view>

test.wxss

/* pages/test/test.wxss */
.page{
  width: 100vw;
  height: 100vh;
}
.m_a{
  width: 100%;
  height: 100%;
  border: 1rpx solid gray;
}
.data_list{
  height: 200rpx;
  width: 120%;
  border: 1rpx solid red;
}
.d_box{
  display: flex;
  justify-content: flex-start;
  justify-items: center;
  height: 100%;
}
.data{
  width: 100vw;
  background: red;
}

原文地址:https://www.cnblogs.com/fps2tao/p/11371325.html

时间: 2024-10-08 19:45:52

小程序实现左滑删除效果的相关文章

微信小程序实现左滑删除源码

左滑删除效果在app的交互方式中十分流行,比如全民应用微信 微信左滑删除 再比如曾引起很大反响的效率app Clear Clear左滑删除 从技术上来说,实现这个效果并不困难,响应一下滑动操作,移动一下组件,再加上些坐标计算,状态记录就可以了.也有一些文章介绍了在小程序上如何实现这一效果,不过我基本可以确定这些开发者没有在真机上详细测试,因为经我实践发现,在小程序上想要完美实现这个效果几乎是不可能完成的任务. 这一切要从小程序的事件机制说起.对于滑动类操作,小程序提供了bind和catch两种响

微信小程序列表左滑删除,删除按钮自适应高度,删除后列表归位,同时存在一个左滑元素,目前为止写过最舒服的左滑删除

js page({ data:{ items:[ //isTouchMove初始化取消所有元素的向左滑动 {name:'店名范德萨',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待付款',price:'23',current:1,isTouchMove: false}, {name:'店名久久丫',huowu:'鸭脖货物鸭肠鸭头鸭爪鸭翅',time:'2032-32-32 12:21',zhuangtai:'待收货',price

小程序地址左滑默认删除

我们在开发小程序时,总会遇到一些删除功能列表的操作,触屏左滑操作,即显示可操作删除按钮; 首先,我们需要在components里边注册一个组件, 我们在 components中创建一个slide目录,然后在新建Component,命名为slide,这样就自动生成slide组件 我们就在slide.wxml中写入 <!--slide-view/slide-view.wxml--> <movable-area class="container" style="w

前端 html h5 移动端 手机端 仿ios左滑删除效果

实现功能:左滑列表项(<li class="route-item" ></li>),出现删除按钮(<div class="removeJs">删除</div>). js部分的代码如下: 1 window.addEventListener('load',function(){ 2 var initX; 3 var moveX; 4 var X = 0; 5 var objX = 0; 6 var width=$(&quo

小程序 手机左滑右滑事件监听

<view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view> // 触摸开始事件 touchStart: function (e) { touchDot = e.touches[0].pageX; // 获取触摸时的原点 // 使用js计时器记录时间 i

Android开发学习之路-PopupWindow和仿QQ左滑删除

这周作业,要做一个类似QQ的左滑删除效果的ListView,因为不想给每个item都放一个按钮,所以决定用PopupWindow,这里记录一下 先放一下效果图: 先说明一下这里面的问题: ①没有做到像QQ那样可以允许item跟随手指移动,虽然PopupWindow有update方法让我们动态移动,但是在屏幕外移动会没有动画效果,直接弹进来 ②仔细观察可以发现,item的滑动和删除按钮的滑动是分开的,无法保证它们会一起播放,QQ的动画可以 再说说大概的思路,因为我们没有让item都带上Button

小程序滴滴车主板块的银行卡管理左滑删除编辑

最近在类似于滴滴软件的一款小程序,工程确实有点大,很多东西都是第一次做.这次记录一下关于左滑删除的一个代码记录.主要的思想就是计算滑动距离的大小来使用css中的 transition 控制滑动的效果,主流的都是控制边距margin来达到左滑的效果. 根据我所拿到的ui,我所运用的是使用宽度和radius来达到左滑的效果,造一个属性值,并塞进遍历数组进行判断是true还是false来控制样式. 完成效果: html <view class='content'> <view class='i

ANDROID仿IOS微信滑动删除_SWIPELISTVIEW左滑删除例子

http://dwtedx.sinaapp.com/itshare_290.html 本例子实现了滑动删除ListView的Itemdemo的效果.大家都知道.这种创意是来源于IOS的.左滑删除的功能.在Android上面实现比较麻烦.本例子中不仅实现了左滑删除功能.还实现了左滑赞.左滑分享.左滑收藏等功能.当然大家也可以根据自己项目的需求来修改功能.QQ和微信也实现了相同的功能.大家可以看看.先上程序运行的效果 怎么样.大家看了这个截图是不是很心动呀.而且在左滑的时候还配有简单的滑动动画呢.非

Android自定义组合控件---教你如何自定义下拉刷新和左滑删除

绪论 最近项目里面用到了下拉刷新和左滑删除,网上找了找并没有可以用的,有比较好的左滑删除,但是并没有和下拉刷新上拉加载结合到一起,要不就是一些比较水的结合,并不能在项目里面使用,小编一着急自己组合了一个,做完了和QQ的对比了一下,并没有太大区别,今天分享给大家,其实并不难,但是不知道为什么网上没有比较好的Demo,当你的项目真的很急的时候,又没有比较好的Demo,那么"那条友谊的小船儿真是说翻就翻啊",好了,下面先来具体看一下实现后的效果吧: 代码已经上传到Github上了,小伙伴们记