小程序-仿微信朋友圈拖动删除图片

2022-01-10

文章目录

1. ♠ 目的
2. ♠ 实现原理
3. ♠ 具体实现

♠ 目的

微信小程序实现图片拖动删除，效果同朋友圈的图片拖动删除效果

在这里插入图片描述

♠ 实现原理

1、使用微信小程序组件 movable-area 和 movable-view 进行拖动处理
2、根据屏幕高度、图片高度、当前页面位置，图片拖动位置，进行计算，确定拖动到删除位置

♠ 具体实现

1、使用 movable-area 和 movable-view 进行拖动处理
2、根据屏幕高度、图片高度、当前页面位置，图片拖动位置，进行计算，确定拖动到删除位置
3、拖动结束后，比较位置。如果删除，则删除；否则，归位(即x/y置空)。
4、标记是否已拖动结束，防止出现鼠标释放后，底部删除展示

以下为主体代码，源码可看 https://gitee.com/mosk/wxapp-imagedel

<movable-area class="page">
  <movable-view direction="all" class="move" data-idx="{{index}}" data-images="{{images}}" bindtap="show" bindtouchstart="start" bindchange="changemove" bindtouchend="end" wx:for="{{images}}" x="{{item.x}}" y="{{item.y}}" animation="{{false}}" wx:key="images">
    <image src="{{item.url}}"></image>
  </movable-view>
  <view class="footer-del" wx:if="{{delvisa}}">拖动到这里删除</view>
</movable-area>

// index.js
// 获取应用实例
let scrollTop = 0;
let screenHeight = 0;
let moveResult = {}
let start = 0
Page({
  data: {
    images: [{
      id: 1,
      url: 'https://img-blog.csdnimg.cn/20201223163901610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dhbGxfRTEwNTc3MzY2MDU=,size_16,color_FFFFFF,t_70#pic_center',
    }, {
      id: 2,
      url: 'https://images2015.cnblogs.com/blog/784641/201606/784641-20160612211349449-166097915.jpg'
    }, {
      id: 3,
      url: 'https://profile.csdnimg.cn/8/1/4/1_wall_e1057736605'
    }, {
      id: 4,
      url: 'https://images2015.cnblogs.com/blog/784641/201606/784641-20160612210641574-222267045.jpg'
    }],
    delvisa: false,
  },
  onLoad() {
    const system = wx.getSystemInfoSync()
    screenHeight = system.windowHeight
  },
  onPageScroll(e) {
    scrollTop = e.scrollTop
  },
  show(e) {
    let images = e.currentTarget.dataset.images
    let urls = images.map(x => x.url)
    console.log(urls)
    wx.previewImage({
      urls: urls
    })
  },
  changemove(e) {
    console.log(e)
    const idx = e.currentTarget.dataset.idx
    if (start === 0) {
      return
    }
    this.setData({
      delvisa: true
    })
    // 图片距离顶部的距离
    let imgTop = e.currentTarget.offsetTop - scrollTop
    let imgmovedel = screenHeight - imgTop - 100
    let del = imgmovedel - e.detail.y
    moveResult = {
      del,
      imageIdx: idx,
      x: e.currentTarget.x,
      y: e.currentTarget.y,
    }
    console.log(moveResult)
  },
  start(e) {
    start = 1
  },
  end(e) {
    start = 0
    const images = this.data.images
    if (moveResult.del < 10) {
      images.splice(moveResult.imageIdx, 1)
    } else {
      if (moveResult.x) {
        images[moveResult.imageIdx].x = moveResult.x
        images[moveResult.imageIdx].y = moveResult.y
      }
    }
    this.setData({
      images,
      delvisa: false
    })
  }
})

（幽蛰写于 2022.01.10）