首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

小程序实现侧滑删除功能

Posted in Javascript onJune 25, 2022

本文实例为大家分享了小程序实现侧滑删除的具体代码，供大家参考，具体内容如下

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.效果图

小程序实现侧滑删除功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

小程序实现侧滑删除功能

- Author -

那些年的笔记

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Tags in this post...

微信小程序(9)
Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
js中substr,substring,indexOf,lastIndexOf的用法小结
Dec 27 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
jQuery实现选项卡切换效果简单演示
Dec 09 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JS中的三个循环小结
Jun 20 Javascript
vue实现引入本地json的方法分析
Jul 12 Javascript
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
JavaScript设计模式之原型模式详情
Jun 21 #Javascript
js前端设计模式优化50%表单校验代码示例
注解(1) 反射(1) RestTemplate(1) virtualenv(1) BottomSheetDialog(1) DeOldify(1) scrapy(1) dataBinding(1) Quartz(1) ip2region(1)
You might like
骨王战斗力在公会成员中排不进前五，却当选了会长，原因竟是这样
2020/03/02 日漫
15种PHP Encoder的比较
2007/04/17 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
微信小程序 缓存（本地缓存、异步缓存、同步缓存）详解
2017/01/17 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
element ui table（表格）实现点击一行展开功能
2018/12/04 Javascript
javascript异常处理实现原理详解
2020/02/17 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
Python常用特殊方法实例总结
2019/03/22 Python
python读写csv文件的方法
2019/08/13 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Django封装交互接口代码
2020/07/12 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
史泰博(Staples)中国官方网站：办公用品一站式采购
2016/09/05 全球购物
Turnbull & Asser官网：英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
员工安全生产承诺书
2014/05/22 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
高中生物教学反思
2016/02/20 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers