小程序?qū)崿F(xiàn)左滑刪除的效果的實(shí)例代碼

更新時(shí)間：2020年10月19日 11:24:04 作者：DOTNET的貓

這篇文章主要介紹了小程序?qū)崿F(xiàn)左滑刪除的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言:實(shí)現(xiàn)小程序滑動(dòng)刪除有幾種方式,文章會(huì)簡(jiǎn)單列舉兩種實(shí)現(xiàn),先看效果。

在這里插入圖片描述

一、使用movable-view實(shí)現(xiàn)滑動(dòng)

先看官方文檔

在這里插入圖片描述

簡(jiǎn)單解讀一下movable-area標(biāo)簽的基本概念。movable-area標(biāo)簽就是定義了一個(gè)可移動(dòng)的視圖容器,支持在頁(yè)面中拖拽滑動(dòng),跟普通的view容器是一樣的,但是也有不同之處,movable-area必須設(shè)置width和height屬性,不設(shè)置默認(rèn)為10px;movable-view 默認(rèn)為絕對(duì)定位,top和left屬性為0px。

 <movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" inertia="true">
  </movable-view>
  </movable-area>

我們需要用的一些屬性out-of-bounds,給他定義true,讓我們的容器超過(guò)可移動(dòng)區(qū)域后，movable-view還可以移動(dòng),direction屬性是定義我們滑動(dòng)的方向,vertical是垂直滑動(dòng),horizontal是水平滑動(dòng)。

二、使用Touch事件實(shí)現(xiàn)滑動(dòng)

1.bindtouchstart 函數(shù),手指觸摸動(dòng)作開始
2.bindtouchmove 函數(shù),手指觸摸后移動(dòng)
3.bindtouchend 函數(shù),手指觸摸動(dòng)作結(jié)束

實(shí)現(xiàn)思路:
1.頁(yè)面上的容器分為上下兩層,上面一層顯示正常加載無(wú)動(dòng)作的內(nèi)容,下面一層顯示容器觸發(fā)事件后展示的內(nèi)容,例如刪除、置頂、標(biāo)為未讀等按鈕。
2.每個(gè)容器上面那一層容器我們通過(guò)css使用定位來(lái)固定,通過(guò)操縱事件來(lái)實(shí)現(xiàn)向需要移動(dòng)的方向移動(dòng)。
3.通過(guò)官方文檔提供的API來(lái)實(shí)現(xiàn)容器隨著方向移動(dòng)。

完整代碼如下

1.wxml

<view class="">
 <view class="containerTitle">使用movable-view實(shí)現(xiàn)左滑</view>
 <view class="list">
 <view class="product-item" wx:for="{{productList}}" wx:for-index="index" wx:key="{{item.id}}" >
  <movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}"
   inertia="true"
   data-productIndex="{{index}}"
   bindtouchstart="handleTouchStart"
   bindtouchend="handleTouchEnd"
   bindchange="handleMovableChange">
   <view class="product-item-wrap">
   <view class="product-movable-item">
    <view class="product-movable-item-name">{{item.name}}</view>
    <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
    <text class="amount">{{item.amount}}</text>
    <text class="unit">萬(wàn)</text>
   </view>
   </view>
  </movable-view>
  </movable-area>
  <view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct">刪除</view>
 </view>
 </view>
 <view class="containerTitle">使用Touch事件實(shí)現(xiàn)左滑</view>
 <view class="list">
 <view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key="{{item.id}}">
  <slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key="{{item.id}}">
  <view class="product-item-wrap">
   <view class="product-movable-item">
   <view class="product-movable-item-name">{{item.name}}</view>
   <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
   <text class="amount">{{item.amount}}</text>
   <text class="unit">萬(wàn)</text>
   </view>
  </view>
  </slide-delete>
 </view>
 </view>
</view>

2.wxss

.containerTitle {
 margin: 60rpx 0 30rpx;
 font-size: 40rpx;
 text-align: center;
 font-weight: bold;
 color: #383A3D;
}

.list .product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.slide-product-list .slide-product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.list .product-item movable-area {
 height: 120rpx;
 width: calc(100vw - 120rpx);
}

.list .product-item movable-view {
 height: 120rpx;
 width: 100vw;
 background: #fff;
 z-index: 999;
}

.list .product-item .delete-btn {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0; 
 width: 120rpx;
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #FFFFFF;
 line-height: 120rpx;
 z-index: 1;
 background: red;
 text-align: center;
}

.list .product-item-wrap {
 position: relative;
 display: flex;
 align-items: center;
 padding: 8rpx 0 20rpx 20rpx;
 box-sizing: border-box;
}

.list .product-item-wrap .product-movable-item {
 flex: 1;
 overflow: hidden;
}

.list .product-item-wrap .product-movable-item-name {
 font-family: PingFangSC-Regular;
 font-size: 28rpx;
 color: #71747A;
 line-height: 60rpx;
 margin-right: 10rpx;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.list .product-item-wrap .product-movable-item-code {
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #969AA3;
}

.list .product-item-wrap .product-movable-item-amount {
 flex: 0 0 auto;
 padding-right: 80rpx;
 position: relative;
}

.list .product-item-wrap .product-movable-item-amount .amount {
 width: 120rpx;
 font-size: 28rpx;
 color: #383A3D;
 line-height: 60rpx;
}

.list .product-item-wrap .product-movable-item-amount .unit {
 position: absolute;
 top: 0;
 right: 30rpx;
 font-size: 28rpx;
 color: #969AA3;
 line-height: 60rpx;
}

3.js代碼

//獲取應(yīng)用實(shí)例
const app = getApp()

Page({
 data: {
 productList: [
  {
  id: 1,
  name: '31省市區(qū)新增境外輸入13例',
  code: 'Jin日頭條',
  amount: 5
  },
  {
  id: 2,
  name: '飼養(yǎng)員遭熊攻擊身亡',
  code: 'bai度新聞',
  amount: 4
  },
  {
  id: 3,
  name: '安倍晉三參拜靖國(guó)神社',
  code: '日媒',
  amount: 10
  }
 ],
 slideProductList: [
  {
  id: 4,
  name: '老兵回憶參加抗美援朝說(shuō)今生無(wú)悔',
  code: 'xin微博',
  amount: 101
  },
  {
  id: 5,
  name: '女子下樓時(shí)玩手機(jī)踩空摔傷',
  code: 'zz資訊',
  amount: 500
  },
  {
  id: 6,
  name: '楊紫為離線慶生',
  code: 'xx新聞',
  amount: 110
  }
 ]
 },

 onLoad: function () {

 },

 /**
 * 顯示刪除按鈕
 */
 showDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex
 this.setXmove(productIndex, -65)
 },

 /**
 * 隱藏刪除按鈕
 */
 hideDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex

 this.setXmove(productIndex, 0)
 },

 /**
 * 設(shè)置movable-view位移
 */
 setXmove: function (productIndex, xmove) {
 let productList = this.data.productList
 productList[productIndex].xmove = xmove

 this.setData({
  productList: productList
 })
 },

 /**
 * 處理movable-view移動(dòng)事件
 */
 handleMovableChange: function (e) {
 if (e.detail.source === 'friction') {
  if (e.detail.x < -30) {
  this.showDeleteButton(e)
  } else {
  this.hideDeleteButton(e)
  }
 } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
  this.hideDeleteButton(e)
 }
 },

 /**
 * 處理touchstart事件
 */
 handleTouchStart(e) {
 this.startX = e.touches[0].pageX
 },

 /**
 * 處理touchend事件
 */
 handleTouchEnd(e) {
 if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
  this.showDeleteButton(e)
 } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
  this.showDeleteButton(e)
 } else {
  this.hideDeleteButton(e)
 }
 },

 /**
 * 刪除產(chǎn)品
 */
 handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
 let productList = this.data.productList
 let productIndex = productList.findIndex(item => item.id === id)
 productList.splice(productIndex, 1)
 this.setData({
  productList
 })
 if (productList[productIndex]) {
  this.setXmove(productIndex, 0)
 }
 },

 /**
 * slide-delete 刪除產(chǎn)品
 */
 handleSlideDelete({ detail: { id } }) {
 let slideProductList = this.data.slideProductList
 let productIndex = slideProductList.findIndex(item => item.id === id)
 slideProductList.splice(productIndex, 1)
 this.setData({
  slideProductList
 })
 }
})

總結(jié)

到此這篇關(guān)于小程序?qū)崿F(xiàn)左滑刪除的效果的文章就介紹到這了,更多相關(guān)小程序左滑刪除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: