微信小程序笔记——小程序movable-view实现左滑删除功能

木子Leo

于 2019-07-03 11:25:26 发布

阅读量5.1k

点赞数 5

分类专栏：微信小程序微信小程序文章标签：小程序左滑效果小程序左滑删除小程序movable-view实现左滑删除功能 movable-view实现左滑

本文链接：https://blog.youkuaiyun.com/zuorishu/article/details/94554386

版权

本文介绍了如何利用微信小程序的movable-view组件来实现左滑删除功能。通过设置固定高度和宽度，结合WXML、JS和WXSS代码，可以创建一个左滑展示删除选项的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一：前言

movable-view(点击查看官方文档)

左滑的元素高度需要是固定的，因为movable-view要求必须设置width和height；

效果图：

wxml：

<view wx:for="{
  {items}}" wx:key="{
  {index}}">
  <movable-area class='movable-area'>
    <movable-view direction="horizontal" class='movable-view'>
      <view class="touch-item {
  {item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{
  {index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
        <view class&

最低0.47元/天解锁文章