小程式實現側滑刪除功能

2022-06-24 22:00:21

本文範例為大家分享了小程式實現側滑刪除的具體程式碼，供大家參考，具體內容如下

1.頁面佈局

<view class='dialogue-box'>
      <scroll-view scroll-y="true" style="height:{{winHeight-50}}px">
        <view class='top-list'>
          <view class='standard_text1'>#</view>
          <view class='standard_text2'>積分專案</view>
          <view class='standard_text3'>標準分</view>
          <view class='standard_text4' bindtap='AddIntegrationProject'>
            <view class='standard_btn'>+</view>
          </view>
        </view>
        <view wx:if="{{lists.length>0}}">
          <view class='top-list'>
            <view wx:for="{{lists}}" wx:key="{{index}}" class='main_item'>
              <view bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{index}}' style="{{item.txtStyle}}" class="inner txt">
                <view class='standard_text1'>{{index+1}}</view>
                <view class='standard_text2'>{{item.itemName}}</view>
                <view class='standard_text3'>{{item.score}}分</view>
                <view class='standard_text4'>
                  <image class='standard_icon' bindtap='editStanderClick' data-item='{{item}}' src='{{BaseURL}}uploadFile/groupImages/edit-h2.png'></image>
                </view>
              </view>
              <view data-index="{{index}}" bindtap='delectOrganizationTeamScoreStandard' data-id='{{item.ID}}' class="inner del">刪除</view>
            </view>
          </view>
        </view>
        <view class='No-data' wx:else>
          <image src='{{BaseURL}}uploadFile/groupImages/No-data.png'></image>
          <view class='No-text'>親！暫無您的上月積分記錄！</view>
        </view>
      </scroll-view>
</view>

2.樣式

/* 標準s */
 
.standard_text1 {
  height: 80rpx;
  line-height: 80rpx;
  float: left;
  width: 60rpx;
  font-size: 28rpx;
  color: #3b3c42;
  padding-left: 30rpx;
}
 
.standard_text2 {
  line-height: 80rpx;
  float: left;
  width: 380rpx;
  font-size: 28rpx;
  color: #3b3c42;
}
 
.standard_text3 {
  height: 80rpx;
  line-height: 80rpx;
  float: left;
  width: 130rpx;
  font-size: 28rpx;
  color: #3b3c42;
}
 
.standard_text4 {
  height: 80rpx;
  line-height: 80rpx;
  float: left;
  width: 140rpx;
  font-size: 28rpx;
  color: #3b3c42;
}
 
.standard_btn {
  height: 50rpx;
  line-height: 50rpx;
  float: left;
  border: 1px solid #3891f8;
  color: #3891f8;
  width: 50rpx;
  text-align: center;
  font-size: 36rpx;
  border-radius: 60px;
  margin-top: 10rpx;
   margin-left: 60rpx;
}
 
.standard_icon {
  height: 60rpx;
  width: 60rpx;
  margin-top: 8rpx;
  float: left;
  margin-left: 55rpx;
}
 
/* 側滑刪除s */
.main_item {
  float: left;
  width: 100%;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  height: 40px;
  line-height: 40px;
}
.inner {
  position: absolute;
  top: 0;
  width: 100%;
  line-height: 80rpx;
  height: 80rpx;
  float: left;
}
 
.inner.txt {
  background-color: #fff;
  width: 100%;
  z-index: 5;
  transition: left 0.2s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.inner.del {
  background-color: #e64340;
  width: 150rpx;
  text-align: center;
  z-index: 4;
  right: 0;
  color: #fff;
}
 
/* 側滑刪除e */

3.js

var app = getApp();
Page({
 
  /**
   * 頁面的初始資料
   */
  data: {
    currentTab: 0,
    BaseURL: app.globalData.BaseURL, //圖片後臺
    mDate: '',
 
    delBtnWidth: 180 //刪除按鈕寬度單位（rpx）
  },
 
  /**
   * 生命週期函數--監聽頁面載入
   */
  onLoad: function(options) {
    var that = this;
    that.getOrganizationTeamScore(); //獲取標準積分
    // 獲取系統寬高資訊 
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          winWidth: res.windowWidth,
          winHeight: res.windowHeight
        });
      }
    });
    that.initEleWidth(); //側滑刪除S
  },
 
  /*****************側滑刪除S*******************/
  touchS: function(e) {
    if (e.touches.length == 1) {
      this.setData({
        //設定觸控起始點水平方向位置
        startX: e.touches[0].clientX
      });
    }
  },
  touchM: function(e) {
    if (e.touches.length == 1) {
      //手指移動時水平方向位置
      var moveX = e.touches[0].clientX;
      //手指起始點位置與移動期間的差值
      var disX = this.data.startX - moveX;
      var delBtnWidth = this.data.delBtnWidth;
      var txtStyle = "";
      if (disX == 0 || disX < 0) { //如果移動距離小於等於0，文字層位置不變
        txtStyle = "left:0px";
      } else if (disX > 0) { //移動距離大於0，文字層left值等於手指移動距離
        txtStyle = "left:-" + disX + "px";
        if (disX >= delBtnWidth) {
          //控制手指移動距離最大值為刪除按鈕的寬度
          txtStyle = "left:-" + delBtnWidth + "px";
        }
      }
      //獲取手指觸控的是哪一項
      var index = e.currentTarget.dataset.index
      // var index = e.target.dataset.index;
      var lists = this.data.lists;
      lists[index].txtStyle = txtStyle;
      //更新列表的狀態
      this.setData({
        lists: lists
      });
    }
  },
 
  touchE: function(e) {
    if (e.changedTouches.length == 1) {
      //手指移動結束後水平位置
      var endX = e.changedTouches[0].clientX;
      //觸控開始與結束，手指移動的距離
      var disX = this.data.startX - endX;
      var delBtnWidth = this.data.delBtnWidth;
      //如果距離小於刪除按鈕的1/2，不顯示刪除按鈕
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "px" : "left:0px";
      //獲取手指觸控的是哪一項
      var index = e.currentTarget.dataset.index
      // var index = e.target.dataset.index;
      var lists = this.data.lists;
      lists[index].txtStyle = txtStyle;
      //更新列表的狀態
      this.setData({
        lists: lists
      });
    }
  },
 
  //獲取元素自適應後的實際寬度
  getEleWidth: function(w) {
    var real = 0;
    try {
      var res = wx.getSystemInfoSync().windowWidth;
      var scale = (750 / 2) / (w / 2); //以寬度750px設計稿做寬度的自適應
      // console.log(scale);
      real = Math.floor(res / scale);
      return real;
    } catch (e) {
      return false;
      // Do something when catch error
    }
  },
 
  initEleWidth: function() {
    var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
    this.setData({
      delBtnWidth: delBtnWidth
    });
  },
 
  //點選刪除按鈕事件
  delItem: function(e) {
    //獲取列表中要刪除項的下標
    var index = e.currentTarget.dataset.index
    // var index = e.target.dataset.index;
    var lists = this.data.lists;
    //移除列表中下標為index的項
    lists.splice(index, 1);
    //更新列表的狀態
    this.setData({
      lists: lists
    });
  },
  /*****************側滑刪除e*******************/
 
  /************************標準制定s***************/
  /**獲取積分標準 */
  getOrganizationTeamScore: function() {
    var that = this;
    wx.request({
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      },
      method: 'POST',
      url: app.globalData.BaseURL + 'group/v1/getOrganizationTeamScore.html',
      data: {
        organizationTeamID: that.data.organizationTeamID,
      },
      success: function(res) {
        wx.hideLoading();
        console.log("獲取積分標準", res.data)
        var status = res.data.status;
        var info = res.data.info
        if (status.indexOf("SUCCESS") == 0) {
          that.setData({
            lists: info
          })
        } else {
          wx.showToast({
            title: '獲取失敗',
            icon: 'none'
          })
        }
      }
    })
  },
 
  /**刪除標準 */
  delectOrganizationTeamScoreStandard: function(e) {
    var organizationTeamScoreStandardID = e.currentTarget.dataset.id;
    var that = this;
    wx.showModal({
      title: '刪除此條標準記錄',
      content: '是否刪除？',
      success: function(res) {
        if (res.confirm) {
          console.log('使用者點選確定')
          wx.request({
            header: {
              "Content-Type": "application/x-www-form-urlencoded"
            },
            method: 'POST',
            url: app.globalData.BaseURL + 'group/v1/delectOrganizationTeamScoreStandard.do',
            data: {
              organizationTeamScoreStandardID: organizationTeamScoreStandardID,
            },
            success: function(res) {
              var status = res.data.status;
              var info = res.data.info
              if (status.indexOf("SUCCESS") == 0) {
                wx.showToast({
                  title: '操作成功',
                  icon: 'none'
                })
                that.getOrganizationTeamScore();
              } else {
                wx.showToast({
                  title: '資料使用中，無法刪除！',
                  icon: 'none'
                })
              }
            }
          })
        } else if (res.cancel) {
          console.log('使用者點選取消')
        }
      }
    })
  },
 
  /**修改標準 */
  editStanderClick: function(e) {
    var item = e.currentTarget.dataset.item;
    wx.navigateTo({
      url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID +
        '&organizationTeamScoreStandardID=' + item.ID +
        '&scoreStanderFixID=' + item.scoreStanderFixID +
        '&itemName=' + item.itemName +
        '&score=' + item.score +
        '&unit=' + item.unit +
        '&isEdit=1',
    })
  },
 
  // 新增積分專案
  AddIntegrationProject: function() {
    wx.navigateTo({
      url: '/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProject?organizationTeamID=' + this.data.organizationTeamID,
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  /************************標準制定e***************/
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function() {
 
  },
 
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function() {
    var that = this;
    that.getOrganizationTeamScore(); //標準制定
  },
 
  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function() {
 
  },
 
  /**
   * 生命週期函數--監聽頁面解除安裝
   */
  onUnload: function() {
 
  },
 
  /**
   * 頁面相關事件處理常式--監聽使用者下拉動作
   */
  onPullDownRefresh: function() {
 
  },
 
  /**
   * 頁面上拉觸底事件的處理常式
   */
  onReachBottom: function() {
 
  },
 
  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function() {
 
  }
})

4.效果圖

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

小程式實現側滑刪除功能

熱門文章