小程序仿朋友圈拖动删除照片功能

最新推荐文章于 2022-01-18 14:30:29 发布

颊口村村霸

最新推荐文章于 2022-01-18 14:30:29 发布

阅读量610

点赞数

分类专栏：微信小程序文章标签：微信小程序小程序微信仿朋友圈删除照片

本文链接：https://blog.csdn.net/qq_42750581/article/details/108539618

版权

本文介绍如何在微信小程序中实现仿朋友圈的拖动删除照片功能。通过设置移动容器，当用户点击图片后，图片会在手指滑动下移动，目标是进入删除框。在开发过程中，需要注意真机调试的性能问题，发布后则能流畅运行。

摘要由CSDN通过智能技术生成

思路：
1、先设置一个移动容器，让它绝对定位隐藏，用来存放你当前点击的图片，然后直接在wxml中直接设置style来控制x，y轴方向。
2、点击图片的时候隐藏当前图片容器，让移动容器出现在你当前点击位置，然后让移动容器按你手指滑动轨迹移动，直到移动到删除框内。
3、如果不通过设置移动容器，直接拖动你当前点击图片也可以，不过这个方法自己试了之后比较容易采坑。
4、真机调试会卡，发布后就好了。
在这里插入图片描述

wxml：

<view class="intro">
  <view class="add-image" hidden="{
    {!moveImage}}" bindtap="chooseImage" bind:longpress="longPress" catch:touchmove="touchMove" catch:touchend="touchEnd">
    <text wx:if="{
    {!src}}">添加图片</text>
    <image mode="scaleToFill" class="img" src="{
    {src}}"></image>
  </view>
  <view class="move-image" hidden="{
    {moveImage}}"  style="top:{
      {
      y}}px;left:{
      {
      x}