商城系統(tǒng) 注冊(cè)

小程序滑動(dòng)刪除功能及實(shí)現(xiàn)方式

2018-03-29|HiShop
導(dǎo)讀:小程序滑動(dòng)刪除功能在應(yīng)用中很常見(jiàn),一般是向左滑動(dòng)列表可刪除項(xiàng)目,那么這種形式要如何實(shí)現(xiàn)呢?...

  小程序滑動(dòng)刪除功能在應(yīng)用中很常見(jiàn),一般是向左滑動(dòng)列表可刪除項(xiàng)目,那么這種形式要如何實(shí)現(xiàn)呢?

小程序滑動(dòng)刪除功能及實(shí)現(xiàn)方式


小程序滑動(dòng)刪除效果示例

小程序滑動(dòng)刪除功能及實(shí)現(xiàn)方式

  每個(gè)列表項(xiàng)綁定touchstart和touchmove事件,監(jiān)聽(tīng)滑動(dòng)手勢(shì),確定滑動(dòng)角度,判斷滑動(dòng)是否有效 列表數(shù)據(jù)源每一項(xiàng)包含標(biāo)志值isTouchMove,用來(lái)確定此項(xiàng)是否滑動(dòng)成功 列表項(xiàng)有兩個(gè)類,根據(jù)isTouchMove的值來(lái)確定渲染那個(gè)類 刪除時(shí)直接操作數(shù)據(jù)源

  touchmove: function (e) {

  let index = e.currentTarget.dataset.index,//當(dāng)前索引

  startX = this.data.startX,//開(kāi)始X坐標(biāo)

  startY = this.data.startY,//開(kāi)始Y坐標(biāo)

  touchMoveX = e.changedTouches[0].clientX,//滑動(dòng)變化坐標(biāo)

  touchMoveY = e.changedTouches[0].clientY,//滑動(dòng)變化坐標(biāo)

  //獲取滑動(dòng)角度

  angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });

  this.data.list.forEach(function (v, i) {

  v.isTouchMove = false

  //滑動(dòng)超過(guò)30度角 return

  if (Math.abs(angle) > 30) return;

  if (i == index) {

  if (touchMoveX > startX) //右滑

  v.isTouchMove = false

  else //左滑

  v.isTouchMove = true

  }

  })

  // //更新數(shù)據(jù)

  this.setData({

  list: this.data.list

  })

  },

 HiShop小程序工具提供多類型商城/門(mén)店小程序制作,可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面,所看即所得,只需要美工就能做出精美商城。

更多小程序開(kāi)發(fā)案例,盡在:http://m.descansotropical.com/xiaocx/kaifa.html 

電話咨詢 預(yù)約演示 0元開(kāi)店