小程序实现侧滑删除功能


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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
jquery实现居中弹出层代码
Aug 25 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
js实现简单音乐播放器
Jun 30 Javascript
js实现车辆管理系统
Aug 26 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
小程序自定义轮播图圆点组件
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
实例(Smarty+FCKeditor新闻系统)
2007/01/02 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
2020/12/09 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python实现八大排序算法(1)
2017/09/14 Python
python密码错误三次锁定(实例讲解)
2017/11/14 Python
Python 数据可视化pyecharts的使用详解
2019/06/26 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
pytorch简介
2020/11/11 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
初中音乐教学反思
2014/01/12 职场文书
社区居务公开实施方案
2014/03/27 职场文书
质量管理标语
2014/06/12 职场文书
建筑工地大门标语
2014/06/18 职场文书
2014年征兵标语
2014/06/20 职场文书
入团介绍人意见范文
2015/06/04 职场文书
无婚姻登记记录证明
2015/06/18 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript