怎么在微信小程序中利用movable-view實(shí)現(xiàn)滑動(dòng)刪除效果？針對這個(gè)問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡單易行的方法。

創(chuàng)新互聯(lián)建站是一家集網(wǎng)站建設(shè),內(nèi)鄉(xiāng)企業(yè)網(wǎng)站建設(shè),內(nèi)鄉(xiāng)品牌網(wǎng)站建設(shè),網(wǎng)站定制,內(nèi)鄉(xiāng)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,內(nèi)鄉(xiāng)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

1、wxml布局

  
    
     
      
        {{'滑動(dòng)刪除' + item.id}}
      
      
        刪除
      
    
  

2、wxss（這里我用的less布局，布局很重要）

page {
  background-color: #efefef;
}
 
.list {
  padding: 30rpx 30rpx 0;

  .row {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30rpx;

    .list_item {
      border-radius: 12rpx;
      position: relative;
      left: -120rpx;
      width: calc(100% + 120rpx);
      height: 160rpx;

      .itmem_wrap {
        width: calc(100% - 120rpx);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        left: 120rpx;
        z-index: 2;
        background-color: #fff;
      }

      .delete_wrap {
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background-color: rgb(219, 54, 54);
        display: flex;
        justify-content: flex-end;
        z-index: 1;

        .delete_btn {
          width: 120rpx;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
        }
      }
    }
  }
}

3、JavaScript

const app = getApp()

Page({
  data: {
    list: [{
        id: 1
      },
      {
        id: 2
      },
      {
        id: 3
      },
      {
        id: 4
      },
      {
        id: 5
      },
      {
        id: 6
      },
      {
        id: 7
      },
      {
        id: 8
      },
      {
        id: 9
      },
      {
        id: 10
      }
    ],
    startX: '',
    startY: ''
  },
  onLoad: function () {
    this.setListX();
  },
  // 給每一項(xiàng)設(shè)置x值
  setListX() {
    this.data.list.map(item => {
      item.x = 0;
    })
    this.setData({
      list: this.data.list
    })
  },
  // 開始滑動(dòng)
  touchMoveStartHandle(e) {
   // 我們要記錄滑動(dòng)開始的坐標(biāo)點(diǎn)，后面計(jì)算要用到
    if (e.touches.length == 1) {
      this.setData({
        startX: e.touches[0].clientX,
        startY: e.touches[0].clientY
      });
    }
  },
  // 滑動(dòng)事件處理,一次只能滑出一個(gè)刪除按鈕 為了防止滑動(dòng)出現(xiàn)抖動(dòng)，我們用滑動(dòng)結(jié)束事件
  touchMoveEndHandle: function (e) {
    var currentIndex = e.currentTarget.dataset.index, //當(dāng)前索引
      startX = this.data.startX, //開始X坐標(biāo)
      startY = this.data.startY, //開始Y坐標(biāo)
      touchMoveEndX = e.changedTouches[0].clientX, //滑動(dòng)變化X坐標(biāo)
      touchMoveEndY = e.changedTouches[0].clientY, //滑動(dòng)變化Y坐標(biāo)
      //獲取滑動(dòng)角度
      angle = this.angle({
        X: startX,
        Y: startY
      }, {
        X: touchMoveEndX,
        Y: touchMoveEndY
      });
    //滑動(dòng)超過50度角 return，防止上下滑動(dòng)觸發(fā)
    if (Math.abs(angle) > 50) return;
    this.data.list.map((item, index) => {
      if (touchMoveEndX > startX) {
        // 右滑
        if (index == currentIndex) item.x = 0;
      } else {
        // 左滑
        item.x = -120
        if (index != currentIndex) item.x = 0;
      }
    })
    this.setData({
      list: this.data.list
    })
  },
  /**
   * 計(jì)算滑動(dòng)角度
   * start 起點(diǎn)坐標(biāo)
   * end 終點(diǎn)坐標(biāo)
   * Math.PI 表示一個(gè)圓的周長與直徑的比例，約為 3.14159;PI就是圓周率π，PI是弧度制的π,也就是180°
   */
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  }
})

關(guān)于怎么在微信小程序中利用movable-view實(shí)現(xiàn)滑動(dòng)刪除效果問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。