小程序实现侧滑删除功能


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

小程序实现侧滑删除功能

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


Tags in this post...

Javascript 相关文章推荐
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
jquery 插件学习(四)
Aug 06 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
js设置和获取自定义属性的方法
Oct 20 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
vue实现导航菜单和编辑文本的示例代码
Jul 04 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%表单校验代码示例
You might like
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js滚动条多种样式,推荐
2007/02/05 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
浅谈Javascript的静态属性和原型属性
2015/05/07 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
JavaScript 作用域实例分析
2019/10/02 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python3实现Web网页图片下载
2016/01/28 Python
Python 类的继承实例详解
2017/03/25 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
表彰先进的通报
2014/01/31 职场文书
个人安全生产承诺书
2014/05/22 职场文书
师范生见习报告范文
2014/11/03 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs